Fullscreen the Material Sidenav Container

Image by cocoparisienne from Pixabay

Scenario

We want our mat-sidenav-container to cover the entire screen.

Approach

Use the fullscreen directive.

<mat-sidenav-container fullscreen>

Demo

Try removing fullscreen and see what happens:

Bonus

Complete markup that can be used inside a custom component replacing mat-sidenav-container:

<mat-sidenav-container fullscreen>
    <ng-content></ng-content>
</mat-sidenav-container>