Как сделать так, чтобы угловой материал сиденав отображался над основным видом?

Question

У меня есть угловой материал sidenav, когда я нажимаю значок меню, sidenav открывается с левой стороны, но он выдвигает основной вид, но если я нажимаю кнопку меню, он должен открываться над основным видом.

Я добавил фотографии того, как я хочу, чтобы это выглядело.Как я могу это сделать?

демо

Answer 1

Вы можете изменить mode на over как:

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

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

Обновление 1:

Вы можете использовать mat-sidenav для желаемого выхода.Не забудьте проверить CSS.

Здесь вы можете найти код.