CODEWITHSUNDEEP
javascripthtmlangularjs
Golinmarq
Golinmarq

Reputation: 1006

Two sidenav in a page in Angular Material

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

Webpage when the media is gt-md

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?

Webpage when the media is gt-sm and Sidenav1 is toggled

Upvotes: 0

Views: 8501

Answers (1)

Mohammad Hassani
Mohammad Hassani

Reputation: 541

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>

Upvotes: 5

Related Questions