Adding Left and Right menu

Navigation is an important component of many mobile apps. We can use to use the menu to navigate to different pages in our apps. Most of the apps don’t have two menus. Just for learning, we will add two menus, one for left and right side of ion-nav.

Step 1 : ionic start LeftRightMenu sidemenu 
We will remove existing page template page and add two more page as Page1 and Page2.

Step 2: We need to change and add some code in app.module.ts
ionic generate page page1 page2

we will remove default page and import two new page as follow 

import { HomePage } from ‘../pages/home/home’;
import { ListPage } from ‘../pages/list/list’;
To
import { Page1 } from ‘../pages/page1/page1’;
import { Page2 } from ‘../pages/page2/page2’;

We have to change rootPage: any = HomePage; to rootPage: any = Page1; in app.component.ts

this.pages = [
{ title: ‘Home’, component: HomePage },
{ title: ‘List’, component: ListPage }
];
To
this.pages = [
{ title: ‘Page One’, component: Page1 },
{ title: ‘Page Two’, component: Page2 }
];

We have to add below methods.rightMenuClick(text){
this.text = text;
}

Step 3: To create menu we need to add following code in app.html

<ion-menu id="leftMenu" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
 
 
<ion-menu id="rightMenu" [content]="content" side="right" type="reveal">
  <ion-header>
    <ion-toolbar>
      <ion-title>Items</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <ion-content>
    <ion-list>
      <button ion-item (click)= "rightMenuClick('Item one')" >
          Item one
      </button>
      <button ion-item (click)= "rightMenuClick('Item Two')" >
          Item Two
      </button>
    </ion-list>
    <ion-card *ngIf="text">
        <ion-card-content>
            You just Clicked {{ text }}
        </ion-card-content>
    </ion-card>
  </ion-content>
</ion-menu>
 
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Each ion-menu directive must have [content]=”content” declared because it will use the content area to bind swipe left or right. In this case, it is basically a local variable in ion-nav as above.

In this app we have two pages, that is page1 and page2. Add the same header for both page1.html or page2.html, where ion-content will be different for both pages.

<ion-header>
  <ion-navbar>
    <ion-title>Getting Started</ion-title>
    <ion-buttons left>
        <button ion-button menuToggle="leftMenu">
            <ion-icon name="menu"></ion-icon>
        </button>  
    </ion-buttons>
    <ion-buttons end>
        <button ion-button menuToggle="rightMenu">
            <ion-icon name="menu"></ion-icon>
        </button>  
    </ion-buttons>
  </ion-navbar>
</ion-header>