<ng-container>
  <mat-toolbar class="example-header" style="display: none;">Header</mat-toolbar>

  <mat-sidenav-container class="example-container">
    <mat-sidenav
      #sidenav
      mode="side"
      opened
      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" style="display: none;">Footer</mat-toolbar>
</ng-container>
