Ionic 2 side menus blocked by tabs content


#1

I’m done some searching but I am having a hard time finding an example that fits my situation and specifically in Ionic 2. I’m looking to have side menus along with the tab navigation. The side menus will contain global functionality relative to a suite of apps that this app will be a part of, while the tabs will do the internal navigation of pages. I have all of them in the app.html file and they are conflicting with each other. Here is what I have:

<ion-tabs greenTheme [selectedIndex]="index">
    <ion-tab tabIcon="people" tabTitle="My Roster" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="stats" tabTitle="Wage Overview" [root]="tab1"></ion-tab>
</ion-tabs>

<ion-menu [content]="content">
     ....menu content....
    <div class="side-exit">
        <ion-icon name='log-out'></ion-icon> Exit
    </div>
</ion-menu>
<ion-menu side='right' type='overlay' [content]="content"><!--(click)='getDepartments()'-->
    <ion-content class='right-side-menu'>
        ....right side content   
    </ion-content>
</ion-menu>
<ion-nav id="nav"  #content swipeBackEnabled="false"></ion-nav>

What happens is I can open each menu but the part of the menu that WOULD be displayed over the content portion of the page (ie not the header bar or the footer) gets blocked by the current page. Here is a screenshot of the closed and opening of the left side menu:


If I add the [root]="rootPage" back into the <ion-nav> tag then the menus work but the tabs then disappear. I’m at a loss to what I’m doing wrong/ what to do to fix it.