Angular材质页面中的两个sidenav

Question

Right now I have 2 sidenavs in a page. As you can see in the picture, sidenav1 is locked open according to $mdMedia(gt-md) and sidenav2 is locked open when $mdMedia(gt-sm).

The problem is that in some point, when sidenav1 is hidden and sidenav2 is visible, and I click the toggle button to show sidenav1, this one is shown behind the sidenav2, as you can see in the image bellow. I change the z-index but it doesn't work. How can I prevent this?

Answer 1

You can have two side bars one right and other left

 <mat-sidenav-container>

    <mat-sidenav #right position="start">
       Start Sidenav.
    </mat-sidenav>

    <mat-sidenav #left position="end">
       End Sidenav.
    </mat-sidenav>

<div>
    <button mat-button (click)="right.open()">right</button>
    <button mat-button (click)="left.open()">left</button>
</div>

</mat-sidenav-container>