How to make angular material sidenav appear over main view?

1
votes

I have an angular material sidenav, when I click menu icon, a sidenav opened on the left side but it pushes the main view but if I click the menu button it should open above the main view.

enter image description here

enter image description here

I have added pictures of what I want it to look like. How can i do this?

demo

1
angularangular-material

1 Answers

1
votes

You can change mode to over as:

<mat-drawer-container>
    <mat-drawer #snav [mode]="'over'"> <=== change it here
        ...
    </mat-drawer>

    <mat-drawer-content>
        ...
    </mat-drawer-content>
</mat-drawer-container>

Update 1:

You can use mat-sidenav for your desired output. Don't forget to check CSS.

Here you can find code.