In my ionic2 app, I wanted to implement a unique side menu for each of my tabs. Here is what I attempted: I used the command ionic start appname tabs --v2 to create the initial structure.
Next, I decided to turn both home.html and contact.html (generated by Ionic CLI) into pages with side menus. So, I modified both home.html and contact.html in the pages folder as follows:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item (click)="openPage(p)">
Page 1
</button>
<button menuClose ion-item (click)="openPage(p)">
Page 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
After that, I updated both ts files (home.ts and contact.ts) to set their respective root page, like this:
rootPage: any = HomeRootPage; // for home.ts
and
rootPage: any = ContactRootPage; // for contact.ts
In HomeRootPage, I defined the navbar as shown below:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home Root</ion-title>
</ion-navbar>
And the ContactRootPage:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Contact Root</ion-title>
</ion-navbar>
Upon running ionic serve, I successfully created individual side menus for each tab (home and contact). However, while I could toggle the side menu on the HomeRootPage, the side menu for the contact root page did not work as intended. Instead of opening the contact side menu, it was displaying the home side menu when toggling.
If anyone knows why this issue occurred or if there's a way to make the menuToggle command refer to its specific side menu, please provide your insights. Thank you in advance! :-)