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?

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?

• javascript
• html
• angularjs

• Just to be clear, when you click toggle button to show sidenav1, you want to display the layout as you show in the first image? – Shaohao Commented Nov 19, 2015 at 15:09
• @ShaohaoLin no, it should show like the second image but the sidenav1 over the sidenav2 and not the other way. It should be the main sidenav shown – Golinmarq Commented Nov 19, 2015 at 16:05

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