Angular材质页面中的两个sidenav

Question

现在，我在页面中有2个sidenav。 如您在图片中看到的，根据$ mdMedia（gt-md），sidenav1锁定为打开状态，而当$ mdMedia（gt-sm）时，sidenav2锁定为打开状态。

问题在于，在某些情况下，当隐藏sidenav1并看到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>