use fixed sidenav for mobile (#298)

Author: mmalerba

package.json

@@ -18,25 +18,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.3",
+    "@angular/animations": "^4.4.4",
     "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "^4.4.3",
-    "@angular/compiler": "^4.4.3",
-    "@angular/core": "^4.4.3",
-    "@angular/forms": "^4.4.3",
-    "@angular/http": "^4.4.3",
+    "@angular/common": "^4.4.4",
+    "@angular/compiler": "^4.4.4",
+    "@angular/core": "^4.4.4",
+    "@angular/forms": "^4.4.4",
+    "@angular/http": "^4.4.4",
     "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "^4.4.3",
-    "@angular/platform-browser-dynamic": "^4.4.3",
-    "@angular/router": "^4.4.3",
+    "@angular/platform-browser": "^4.4.4",
+    "@angular/platform-browser-dynamic": "^4.4.4",
+    "@angular/router": "^4.4.4",
     "@angular/service-worker": "^1.0.0-beta.16",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "^1.0.0",
-    "@angular/compiler-cli": "^4.4.3",
+    "@angular/compiler-cli": "^4.4.4",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
     "hammerjs": "^2.0.8",

src/app/material-docs-app.html

@@ -1,2 +1,3 @@
 <app-navbar class="mat-elevation-z6"></app-navbar>
 <router-outlet></router-outlet>
+

src/app/material-docs-app.scss

@@ -1,23 +1,39 @@
 material-docs-app {
+  display: flex;
+  flex-direction: column;
   position: absolute;
-  top: 0;
+  top: 56px;
   bottom: 0;
   left: 0;
   right: 0;
-  display: flex;
-  flex-direction: column;
+}
+
+app-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
 }
 
 material-docs-app > app-component-sidenav {
-  flex: 1 1 auto;
+  flex: 1;
 }
 
-// Target last-child as it will be the output of the router-outlet within the app's container.
-material-docs-app > :last-child {
+material-docs-app > app-homepage,
+material-docs-app > app-guides,
+material-docs-app > guide-viewer {
   overflow-y: auto;
 }
 
-app-navbar {
-  position: relative;
-  z-index: 10;
+@media (max-width: 720px) {
+  material-docs-app {
+    top: 92px;
+  }
+
+  material-docs-app > app-homepage,
+  material-docs-app > app-guides,
+  material-docs-app > guide-viewer {
+    overflow-y: visible;
+  }
 }

src/app/pages/component-sidenav/component-sidenav.html

@@ -1,7 +1,9 @@
 <mat-sidenav-container class="docs-component-viewer-sidenav-container">
   <mat-sidenav #sidenav class="docs-component-viewer-sidenav"
               [opened]="!isScreenSmall()"
-              [mode]="isScreenSmall() ? 'over' : 'side'">
+              [mode]="isScreenSmall() ? 'over' : 'side'"
+              [fixedInViewport]="isScreenSmall()"
+              fixedTopGap="92">
     <nav *ngFor="let category of docItems.getCategories((params | async)?.section)">
       <h3>{{category.name}}</h3>
       <ul>

src/app/pages/component-sidenav/component-sidenav.scss

@@ -3,16 +3,11 @@ $sidenav-width: 240px;
 
 app-component-sidenav {
   display: flex;
+  flex-direction: column;
 }
 
 .docs-component-viewer-sidenav-container {
-  width: 100%;
-
-  .mat-drawer-content {
-    position: absolute;
-    right: 0;
-    left: 0;
-  }
+  flex: 1;
 }
 
 .docs-component-viewer-sidenav {
@@ -86,3 +81,9 @@ app-component-sidenav {
     flex-grow: 1;
   }
 }
+
+@media (max-width: 720px) {
+  .docs-component-viewer-sidenav-container {
+    flex: 1 0 auto;
+  }
+}

src/app/pages/component-sidenav/component-sidenav.ts

@@ -8,7 +8,7 @@ import {ComponentHeaderModule} from '../component-page-header/component-page-hea
 import {FooterModule} from '../../shared/footer/footer';
 import {Observable} from 'rxjs/Observable';
 
-const SMALL_WIDTH_BREAKPOINT = 840;
+const SMALL_WIDTH_BREAKPOINT = 720;
 
 @Component({
   selector: 'app-component-sidenav',