mobile example

Author: mmalerba

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

@@ -1,16 +1,16 @@
-<md-toolbar color="primary" role="header" aria-label="My app">
+<md-toolbar color="primary" role="header" aria-label="Basic sidenav app">
   <button md-icon-button aria-label="Navigation menu" (click)="snav.toggle()">
     <md-icon aria-hidden="true">menu</md-icon>
   </button>
-  <span class="a11y-demo-sidenav-app-name">My App</span>
+  <span class="a11y-demo-sidenav-app-name">Basic Sidenav App</span>
 </md-toolbar>
 
 <md-sidenav-container class="a11y-demo-sidenav-container">
   <md-sidenav #snav mode="side">
     <md-nav-list>
       <a md-list-item routerLink="..">Home</a>
       <a md-list-item routerLink="../basic">Basic sidenav example</a>
-      <a md-list-item routerLink="../mobile">Mobile sidenav example</a>
+      <a md-list-item routerLink="../mobile">Responsive sidenav example</a>
       <a md-list-item routerLink="../dual">Dual sidenavs example</a>
     </md-nav-list>
   </md-sidenav>

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

@@ -0,0 +1,30 @@
+<md-toolbar color="primary" role="header" aria-label="Responsive sidenav app"
+            [class.a11y-demo-sidenav-header-fixed]="mobileQuery.matches">
+  <button md-icon-button aria-label="Navigation menu" (click)="snav.toggle()">
+    <md-icon aria-hidden="true">menu</md-icon>
+  </button>
+  <span class="a11y-demo-sidenav-app-name">Responsive Sidenav App</span>
+</md-toolbar>
+
+<md-sidenav-container
+    class="a11y-demo-sidenav-container"
+    [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
+  <md-sidenav
+      #snav
+      [mode]="mobileQuery.matches ? 'over' : 'side'"
+      [fixedInViewport]="mobileQuery.matches">
+    <md-nav-list>
+      <a md-list-item routerLink="..">Home</a>
+      <a md-list-item routerLink="../basic">Basic sidenav example</a>
+      <a md-list-item routerLink="../mobile">Responsive sidenav example</a>
+      <a md-list-item routerLink="../dual">Dual sidenavs example</a>
+    </md-nav-list>
+  </md-sidenav>
+
+  <md-sidenav-content>
+    <button md-raised-button aria-label="Close responsive sidenav example" color="primary"
+            class="a11y-demo-sidenav-close" routerLink="..">
+      Close example
+    </button>
+  </md-sidenav-content>
+</md-sidenav-container>

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

@@ -0,0 +1,3 @@
+.a11y-demo-sidenav-header-fixed {
+  position: fixed;
+}

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

@@ -1,12 +1,25 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectorRef, Component, OnDestroy, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
   moduleId: module.id,
   selector: 'mobile-sidenav-a11y',
   templateUrl: 'mobile-sidenav-a11y.html',
-  styleUrls: ['shared.css'],
+  styleUrls: ['shared.css', 'mobile-sidenav-a11y.css'],
   host: {'class': 'a11y-demo-sidenav-app'},
   encapsulation: ViewEncapsulation.None,
 })
-export class SidenavMobileAccessibilityDemo {}
+export class SidenavMobileAccessibilityDemo implements OnDestroy {
+  mobileQuery = matchMedia('(max-width: 600px)');
+
+  _mobileQueryListener: () => void;
+
+  constructor(changeDetectorRef: ChangeDetectorRef) {
+    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this._mobileQueryListener);
+  }
+
+  ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this._mobileQueryListener);
+  }
+}

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

@@ -1,5 +1,6 @@
 .a11y-demo-sidenav-app {
-  display: block;
+  display: flex;
+  flex-direction: column;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -8,8 +9,7 @@
 }
 
 .a11y-demo-sidenav-container {
-  width: 100%;
-  height: 100%;
+  flex: 1;
 }
 
 .a11y-demo-sidenav-app-name {