Ionic-framework: Using side-menus on multiple pages

[Eraldo]

Ionic version: (check one with "x")
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
Having multiple pages with ion-menus that open via buttons on these pages. On some of these pages the buttons to open the menus won't actually open the side-menus.

Expected behavior:
Clicking on a button to open a side-menu open that menu regardless if there are other pages also having side-menus.

Steps to reproduce:
https://stackblitz.com/edit/ionic-multiple-menus-issue

1. Click on the filter button on the top right. (on the home page -- default)
   => This should open the "Menu 1"
2. Click on the "Close" button to close that menu.
   => Menu closes.
3. Click on the "About" Tab in the tab-bar.
   => Switching page to "AboutPage".
4. Click on the filter button on the top right.
   => ISSUE: Menu 2 does not show!! (I would have expected that)

Related code:
https://stackblitz.com/edit/ionic-multiple-menus-issue

Other information:
There is a related issue: https://github.com/ionic-team/ionic/issues/14187
=> However it is not addressing the menus via specific id's (which is what I do).

I setup my side-menus according to the multiple side-menus docs: https://ionicframework.com/docs/api/components/app/MenuController/#multiple-menus-on-the-same-side

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
ionic-angular 2.5.2
For more details please see the stackblitz link.

[loohopen]

ye, i met this problem too, and i solved it by this method:
First: add id on ion-menu like this:
pageA

<ion-menu [content]="pageAcontent" id="pageA" type="overlay">

pageB

<ion-menu [content]="pageBcontent" id="pageB" type="overlay">

Then replace menuToggle directive by

(tap)=menutoggle()

ye, use method!

and finaly:
in componet, you can write menutoggle method like this:
pageA:

menutoggle () {
    this.menuCtr.enable(false, 'pageB');
    this.menuCtr.enable(true, 'pageA');
    this.menuCtr.toggle('pageA');
}

also pageB:

menutoggle () {
    this.menuCtr.enable(false, 'pageA');
    this.menuCtr.enable(true, 'pageB');
    this.menuCtr.toggle('pageB');
}

if you don't want to add method in every page, you can rewrite menutoggle directive， the thinking is:
disabled other page's menus, only enable this page's menu add add toggle method to this page's menu;

hope this is useful for you

[mebibou]

@Eraldo actually it is exactly the same issue, because the id on the menu don't change the fact that only one menu on each side can exist at a time in the navigation stack. If they fix this, then using either right or the id will open menus on multiple sides.

[Eraldo]

Okay.. in the end all I needed was this:

  ionViewDidEnter() {
    this.menuCtrl.enable(true, 'my-menu-id-on-this-page')
  }

According to the docs this will automatically disable all others on the same side.
(https://ionicframework.com/docs/api/components/app/MenuController/#multiple-menus-on-the-same-side)

Here is the working demo: https://stackblitz.com/edit/ionic-multiple-menus-issue

This should also solve https://github.com/ionic-team/ionic/issues/14187

[mebibou]

@Eraldo no it won't solve my issue because it won't work without using ids. And by default it should disable menus on a non-active page, period

[Eraldo]

Thank your for sharing your perspective with me, @mebibou.
What you say does make sense to me. I agree. I consider my issue fixed for now and will track your ticket for updates hoping for the best. :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.