Finish up demo

Author: mmalerba

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

@@ -3,51 +3,58 @@
 </button>
 
 <div class="demo-sidenav-area" *ngIf="isLaunched">
+  <md-toolbar *ngIf="showHeader && !coverHeader">Header</md-toolbar>
   <md-sidenav-container>
-    <md-sidenav #start (open)="myinput.focus()" mode="side">
+    <md-sidenav #start (open)="myinput.focus()" [mode]="mode"
+                [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
       Start Side Sidenav
       <br>
       <button md-button (click)="start.close()">Close</button>
       <br>
       <button md-button (click)="end.open()">Open End Side</button>
       <br>
-      <button md-button
-              (click)="start.mode = (start.mode == 'push' ? 'over' : (start.mode == 'over' ? 'side' : 'push'))">Toggle Mode</button>
+      <button md-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>
     </md-sidenav>
 
-    <md-sidenav #end position="end">
+    <md-sidenav #end position="end"
+                [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
       End Side Sidenav
       <br>
       <button md-button (click)="end.close()">Close</button>
       <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
     </md-sidenav>
 
     <md-sidenav-content>
-      <div>
-        <button md-raised-button (click)="isLaunched = false">
-          Exit Fullscreen Sidenav Demo
-        </button>
-      </div>
+      <md-toolbar *ngIf="showHeader && coverHeader">Header</md-toolbar>
+      <div class="demo-sidenav-content">
+        <div>
+          <button md-raised-button (click)="isLaunched = false">
+            Exit Fullscreen Sidenav Demo
+          </button>
+        </div>
 
-      <div>
-        <h3>Sidenav</h3>
-        <button md-button (click)="start.toggle()">Toggle Start Side Sidenav</button>
-        <button md-button (click)="end.toggle()">Toggle End Side Sidenav</button>
-        <button md-button>Toggle fixed mode</button>
-        <button md-button>Toggle fixed covers header/footer</button>
-      </div>
+        <div>
+          <h3>Sidenav</h3>
+          <button md-button (click)="start.toggle()">Toggle Start Side Sidenav</button>
+          <button md-button (click)="end.toggle()">Toggle End Side Sidenav</button>
+          <md-checkbox [(ngModel)]="fixed">Fixed mode</md-checkbox>
+          <md-checkbox [(ngModel)]="coverHeader">Sidenav covers header/footer</md-checkbox>
+        </div>
 
-      <div>
-        <h3>Header / Footer</h3>
-        <button md-button>Toggle header</button>
-        <button md-button>Toggle footer</button>
-      </div>
+        <div>
+          <h3>Header / Footer</h3>
+          <md-checkbox [(ngModel)]="showHeader">Show header</md-checkbox>
+          <md-checkbox [(ngModel)]="showFooter">Show footer</md-checkbox>
+        </div>
 
-      <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
+        <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
+      </div>
+      <md-toolbar *ngIf="showFooter && coverHeader">Footer</md-toolbar>
     </md-sidenav-content>
   </md-sidenav-container>
+  <md-toolbar *ngIf="showFooter && !coverHeader">Footer</md-toolbar>
 </div>

src/demo-app/sidenav/sidenav-demo.scss

@@ -4,16 +4,18 @@
   bottom: 0;
   left: 0;
   right: 0;
+  display: flex;
+  flex-direction: column;
+
+  .mat-toolbar {
+    flex: 0;
+  }
 
   .mat-sidenav-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    flex: 1;
   }
 
-  .mat-sidenav-content {
+  .demo-sidenav-content {
     padding: 32px;
   }
 

src/demo-app/sidenav/sidenav-demo.ts

@@ -11,4 +11,12 @@ import {Component, ViewEncapsulation} from '@angular/core';
 export class SidenavDemo {
   isLaunched = false;
   fillerContent = Array(30);
+  fixed = false;
+  coverHeader = false;
+  showHeader = false;
+  showFooter = false;
+  modeIndex = 0;
+  get mode() { return ['side', 'over', 'push'][this.modeIndex]; }
+  get fixedTop() { return this.fixed && this.showHeader && !this.coverHeader ? 64 : 0; }
+  get fixedBottom() { return this.fixed && this.showFooter && !this.coverHeader ? 64 : 0; }
 }

src/lib/sidenav/drawer.scss

@@ -89,7 +89,6 @@ $mat-drawer-over-drawer-z-index: 4;
   min-width: 5vw;
   outline: 0;
   box-sizing: border-box;
-  height: 100%;
   overflow-y: auto; // TODO(kara): revisit scrolling behavior for drawers
   transform: translate3d(-100%, 0, 0);
 
@@ -120,3 +119,7 @@ $mat-drawer-over-drawer-z-index: 4;
     }
   }
 }
+
+.mat-sidenav-fixed {
+  position: fixed;
+}

src/lib/sidenav/sidenav.ts

@@ -68,7 +68,7 @@ export class MdSidenavContent extends MdDrawerContent {
     '[class.mat-drawer-over]': 'mode === "over"',
     '[class.mat-drawer-push]': 'mode === "push"',
     '[class.mat-drawer-side]': 'mode === "side"',
-    '[class.mat-app-sidenav-fixed]': 'fixedInViewport',
+    '[class.mat-sidenav-fixed]': 'fixedInViewport',
     '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
     '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
   },