How to make angular material sidenav appear over m

Question

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.

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

demo

Answer 1

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.