ipsos-components/src/demo-app/sidenav/sidenav-demo.html

Material Design components for Angular

<button mat-raised-button (click)="isLaunched = true" *ngIf="!isLaunched" color="primary">
  Launch Fullscreen Sidenav Demo
</button>

<div class="demo-sidenav-area" *ngIf="isLaunched">
  <mat-toolbar *ngIf="showHeader && !coverHeader">Header</mat-toolbar>
  <mat-sidenav-container>
    <mat-sidenav #start (open)="myinput.focus()" [mode]="'side'"
                >
      Start Side Sidenav
      <br>
      <button mat-button (click)="start.close('mouse')">Close</button>
      <br>
      <button mat-button (click)="end.open('keyboard')">Open End Side</button>
      <br>
      <button mat-button (click)="modeIndex = (modeIndex + 1) % 3">Toggle Mode</button>
      <div>Mode: {{start.mode}}</div>
      <br>
      <input #myinput>
      <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
    </mat-sidenav>

    <mat-sidenav #end position="end"
                 [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
      End Side Sidenav
      <br>
      <button mat-button (click)="end.close('mouse')">Close</button>
      <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
    </mat-sidenav>

    <mat-sidenav-content>
      <mat-toolbar *ngIf="showHeader && coverHeader">Header</mat-toolbar>
      <div class="demo-sidenav-content">
        <div>
          <button mat-raised-button (click)="isLaunched = false">
            Exit Fullscreen Sidenav Demo
          </button>
        </div>

        <div>
          <h3>Sidenav</h3>
          <button mat-button (click)="start.toggle(undefined, 'mouse')">Toggle Start Side Sidenav</button>
          <button mat-button (click)="end.toggle(undefined, 'mouse')">Toggle End Side Sidenav</button>
          <mat-checkbox [(ngModel)]="fixed">Fixed mode</mat-checkbox>
          <mat-checkbox [(ngModel)]="coverHeader">Sidenav covers header/footer</mat-checkbox>
        </div>

        <div>
          <h3>Header / Footer</h3>
          <mat-checkbox [(ngModel)]="showHeader">Show header</mat-checkbox>
          <mat-checkbox [(ngModel)]="showFooter">Show footer</mat-checkbox>
        </div>

        <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
      </div>
      <mat-toolbar *ngIf="showFooter && coverHeader">Footer</mat-toolbar>
    </mat-sidenav-content>
  </mat-sidenav-container>
  <mat-toolbar *ngIf="showFooter && !coverHeader">Footer</mat-toolbar>
</div>