how to create multiple sidenav in angular material?

Question

i have a sidenav in left side, it had multiple menu's. if a menu clicked another sidenav open next to previews sidenav. Angular material have sidenav on left and right position only. It is right thing to add additional sidenavs

example link https://stackblitz.com/edit/angular-mhmxv6?embed=1&file=src/app/app.component.html

Answer 1

You will need to wrap your existing html inside a parent mat-sidenav-container with a new mat-sidenav for that parent.

Stackblitz

https://stackblitz.com/edit/angular-nure99?embed=1&file=app/sidenav-overview-example.html

HTML

     <div>
    <mat-sidenav-container class="sidenav-full">
        <mat-sidenav #sidenav1 mode="side" position="start" role="navigation" class="sidenav-wv">
      this is parent menu
        </mat-sidenav>
        <mat-sidenav-content>
            <mat-sidenav-container class="sidenav-full">
                <mat-sidenav #sidenav2 opened mode="side" position="start" role="navigation" class="sidenav-wv">

                    <div fxLayout="column" class="sidenav-normal">
                        <button (click)="sidenav2.toggle()" mat-button class="align-center color-white">
          <i class="material-icons">reorder</i>
        </button> 
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 1</span>
        </button>
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 2</span>
        </button>
      </div>

    </mat-sidenav>    
    <mat-sidenav-content>
      <mat-toolbar role="toolbar" class="main-header mat-elevation-z1 sticky-header">
        <mat-toolbar-row>
          <button mat-button (click)="sidenav2.toggle()" class="toggle-Mbtn new--item">
            <i class="material-icons color-white">menu</i>
          </button>
          <h2 class="header-text header-block">This is Dashboard</h2> 
          <span class="flex-spacer"></span>
          <button mat-icon-button>
            <mat-icon class="color-white">search</mat-icon>
          </button>
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon class="color-white">more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>
              <mat-icon>power_settings_new</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>

      <div>
        main board
      </div>

     </mat-sidenav-content>
    </mat-sidenav-container>
   </mat-sidenav-content>
  </mat-sidenav-container>
</div>