I tried:
ionic start myApp sidemenu
app.html:
<ion-split-pane>
<ion-menu [content]="content" side="left">
<ion-header>
<ion-toolbar>
<ion-title>Left 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 [content]="content" side="right">
<ion-header>
<ion-toolbar>
<ion-title>Detail</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>
Detail content goes here.
</p>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
home.html:
<ion-header>
<ion-navbar>
<button ion-button menuToggle="left" left>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Master
</ion-title>
<!--
<button ion-button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
-->
</ion-navbar>
</ion-header>
<ion-content padding>
<p>
Master (main) content goes here.
</p>
</ion-content>
iPhone 6:
IPad Pro:
And, you can use an ‘ngIf’ to show/hide the right menu.
app.html:
...
<button menuClose ion-item (click)="toggleMenu()">
Toggle Right Menu
</button>
...
<ng-container *ngIf='showRightMenu'>
<ion-menu [content]="content" side="right">
<ion-header>
<ion-toolbar>
<ion-title>Detail</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>
Detail content goes here.
</p>
</ion-content>
</ion-menu>
</ng-container>
...
app.component.ts:
showRightMenu: boolean = true;
...
toggleMenu() {
this.showRightMenu = !this.showRightMenu;
}
IPad Pro:
