typescript - How to add second sidemenu from other side

Question

How can I add a second sidemenu? I have the normal sidemenu on the left side which works great. Now I want to add a second sidemenu with filter options.

Answer 1

Just like you can read in MenuToggle from Ionic2 docs you can do it by first creating two ion-menu in your app.html (or where you want to define the second menu)

<ion-menu [content]="content" side="left" id="menu1">

  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">

  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

Please notice the side="left" and side="right" attributes in the ion-menu element. We'll use that later to know which menu should be opened (the id attribute could be also used in the same way).

Then, in your page, add to each menuToggle which menu should be opened by assigning to it the side attribute we defined earlier (or the id if you prefer to do so).

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

You can find a working plnuker here.

---

UPDATE:

For testing I simply moved the main from the app.html to a page's html file map.html. I didn't change the sides or ids. But the menu is not appearing when clicking the button (also have been not changed)

I've done that in this plunker. Now, the HomePage has the menu on the right defined there in that hmtl file.

<ion-menu [content]="content" side="right" id="menu2">
  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #content padding>

</ion-content>

Please notice the content variable in the <ion-content> element. Like you can read in Ionic docs:

To add a menu to an application, the element should be added as a sibling to the content it belongs to. A local variable should be added to the content element and passed to the menu element in the content property. This tells the menu which content it is attached to, so it knows which element to watch for gestures.