ipsos-components/src/material-examples/sidenav-fixed/sidenav-fixed-example.html

Material Design components for Angular

<ng-container *ngIf="shouldRun">
  <mat-toolbar class="example-header">Header</mat-toolbar>

  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened="true" class="example-sidenav"
                 [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
                 [fixedBottomGap]="options.value.bottom">
      {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav
    </mat-sidenav>

    <mat-sidenav-content [formGroup]="options">
      <p><mat-checkbox formControlName="fixed">Fixed</mat-checkbox></p>
      <p><mat-form-field>
        <input matInput type="number" formControlName="top" placeholder="Top gap">
      </mat-form-field></p>
      <p><mat-form-field>
        <input matInput type="number" formControlName="bottom" placeholder="Bottom gap">
      </mat-form-field></p>
      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
    </mat-sidenav-content>
  </mat-sidenav-container>

  <mat-toolbar class="example-footer">Footer</mat-toolbar>
</ng-container>

<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>