Angular material how to position mat-sidenav top or bottom

Question

I am new to angular material. From angular material doc i can see it can be positioned 'start' or 'end'.

<div style="border:solid 1px red;">
    <mat-sidenav-container>
        <mat-sidenav class="sidenav"
                     position="end" <!-- want to position top or bottom here-->
                     [opened]="sidenavOption.open"
                     [mode]="sidenavOption.mode">
            Sidenav content
        </mat-sidenav>
        <ng-content></ng-content>
    </mat-sidenav-container>
</div>

I would like to position 'top' or 'bottom'

Can anyone help me how to do this?

Thanks

Answer 1

AFAIK the sidenav as the name suggests can only be present on the right (end) or left (start) side of your page. Even though the material design specifications allow a bottom drawer (here).

As stated here there is no other property than position to specify the position other than left or right.

It seems that you would either need to make your own implementation of such a drawer -But for that you can extend from the material design classes and build upon them- or you could use a MatBottomSheet, which is almost the same, but can only be used as a kind of bottom drawer.