title: Integrate two side menus in same Ionic 2 application
body: <p>I was following some good <a href="http://embed.plnkr.co/OeWv0f/preview" rel="nofollow noreferrer">example</a> in which you can able to create two side menu's (right and left) in same application. The example in the above link is based on Ionic version 1, but i am looking for the same in Ionic v2.</p>
  
  <p><strong>Expected</strong></p>
  
  <p><a href="https://i.stack.imgur.com/uCKV5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uCKV5.png" alt="enter image description here"></a></p>
  
  <p>It should open left menu when we click left menu button (it should close right menu if already opened)</p>
  
  <p><a href="https://i.stack.imgur.com/tnra2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tnra2.png" alt="enter image description here"></a></p>
  
  <p>and when we click right button this should open right side menu (it should close left side menu if already opened)</p>
  
  <p><a href="https://i.stack.imgur.com/T414N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T414N.png" alt="enter image description here"></a></p>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
      &lt;ion-header&gt;
          &lt;ion-toolbar&gt;
              &lt;ion-title&gt;LEFT MENU&lt;/ion-title&gt;
          &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
  
      &lt;ion-content&gt;                             
          &lt;ion-list&gt;
              &lt;ion-item menuClose&gt;
                  &lt;ion-icon name=""&gt;&lt;/ion-icon&gt;
                  ABC
                  &lt;ion-icon name="contact" item-right&gt;&lt;/ion-icon&gt;
              &lt;/ion-item&gt;
              &lt;ion-item menuClose&gt;
                  &lt;ion-icon name=""&gt;&lt;/ion-icon&gt;
                  XYZ
                  &lt;ion-icon name="person" item-right&gt;&lt;/ion-icon&gt;
              &lt;/ion-item&gt;
  
              &lt;ion-list-header&gt;User&lt;/ion-list-header&gt;
              &lt;ion-item menuClose&gt;
                  &lt;ion-icon name=""&gt;&lt;/ion-icon&gt;
                  Forget Password
                  &lt;ion-icon name="key" item-right&gt;&lt;/ion-icon&gt;&lt;/ion-item&gt;
              &lt;ion-item menuClose&gt;
                  &lt;ion-icon name=""&gt;&lt;/ion-icon&gt;
                  Logout
                  &lt;ion-icon name="lock" item-right&gt;&lt;/ion-icon&gt;
              &lt;/ion-item&gt;
          &lt;/ion-list&gt;
      &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  
  &lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p><strong>app.component.js</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Nav } from 'ionic-angular';
  import { StatusBar, Splashscreen } from 'ionic-native';
  
  import { WelcomePage } from '../pages/welcome/welcome';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
  
    rootPage: any = WelcomePage;
  
    constructor(public platform: Platform) {}
  
  }
  </code></pre>
  
  <p><strong>welcome.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar color="danger"&gt;
      &lt;button ion-button menuToggle icon-only (click)="openMenu()"&gt;
        &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
      &lt;ion-title&gt;WELCOME&lt;/ion-title&gt;
      &lt;ion-buttons end&gt;
        &lt;button ion-button icon-only (click)="openUserProfile()"&gt;
          &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>welcome.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams, MenuController } from 'ionic-angular';
  
  @Component({
    selector: 'page-welcome',
    templateUrl: 'welcome.html'
  })
  export class WelcomePage {
  
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams, 
      public menu: MenuController) {
  
      menu.enable(true);
  
    }    
  
    openMenu() {
      this.menu.toggle();
    }
  
    openUserProfile(){
        // how to open another (right) menu
    }
  
  }
  </code></pre>
  
  <p>Please guide me with some good examples and concept.</p>
  
  <p>Thanking you in advance.</p>