Ionic 4 : Multilevel ion menu with animations

Ionic Framework
1

Hello !

I want to achieve this with ion menu, plus a back button on the second level :

multi-level-sidemenu
multi-level-sidemenu.gif454×607 929 KB

I have not found anything about this type of multilevel menu on Ionic Forums.

Ideally i would like to keep all the levels on the same page, for example my code with no animation inside the sidemenu

<ion-menu side="start" menuId="sidemenu">
  <ion-content>
    <ion-list #level1 [hidden]="playlist">
      <ion-header>
		  <ion-toolbar>
			<ion-title>Demo</ion-title>
		  </ion-toolbar>
      </ion-header>
      <ion-item *ngFor="let playlist of playlists" (click)="loadPlaylist(playlist.uid)" class="ion-activatable">{{playlist.name}}</ion-item>
    </ion-list>
    <ion-list #level2 [hidden]="!playlist">
	  <ion-header>
		  <ion-toolbar>
			<ion-buttons slot="start">
				<ion-back-button></ion-back-button>
			</ion-buttons>
			<ion-title>{{playlist.name}}</ion-title>
		  </ion-toolbar>
      </ion-header>
      <ion-item *ngFor="let scene of scenes" (click)="loadScene(scene.uid)" class="ion-activatable">
		<ion-note slot="start">{{scene.number}}</ion-note>
    	<ion-label>
    		<h2>{{scene.name}}</h2>
    		<p>{{scene.artist}}</p>
    	</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

ionViewWillEnter() {
	if(this.scene == undefined)
		this.menu.open("sidemenu");
}

loadPlaylist(uid:string) {
	this.playlist = this.playlists.find(p => p.uid == uid);
	this.scenes = this.producer.scenes.find(s => s.playlistUid == uid);
}

loadScene(uid:string) {
	this.scene = this.scenes.find(s => s.uid == uid);
	this.menu.close("sidemenu");
}

closeScene() {
	this.scene = undefined;
	this.menu.open("sidemenu");
}

Thanks !

2 Likes