Angular Material 页面中的两个sidenav

Question

现在我在一个页面中有 2 个 sidenavs。如图所示，sidenav1 根据 $mdMedia(gt-md) 锁定打开，sidenav2 在 $mdMedia(gt-sm) 时锁定打开。

问题是，在某些时候，当 s​​idenav1 隐藏而 sidenav2 可见时，我单击切换按钮以显示 sidenav1，这个显示在 sidenav2 后面，如下图所示。我更改了 z-index 但它不起作用。我怎样才能防止这种情况？

Answer 1

你可以有两个侧栏，一个右边一个左边

 <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>