@if (shouldRun) {
  <mat-toolbar class="example-header">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>
        <mat-label>Top gap</mat-label>
        <input matInput type="number" formControlName="top">
      </mat-form-field></p>
      <p><mat-form-field>
        <mat-label>Bottom gap</mat-label>
        <input matInput type="number" formControlName="bottom">
      </mat-form-field></p>
      <p><button matButton (click)="sidenav.toggle()">Toggle</button></p>
    </mat-sidenav-content>
  </mat-sidenav-container>

  <mat-toolbar class="example-footer">Footer</mat-toolbar>
} @else {
  <div>Please open on StackBlitz to see result</div>
}