feat(sidenav): add responsive sidenav

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

@@ -48,6 +48,19 @@ <h2>Sidenav Already Opened</h2>
   </div>
 </md-sidenav-container>
 
+<h2>Responsive Sidenav</h2>
+
+<md-sidenav-container class="demo-sidenav-container" breakpointWidth="500" breakpointChangeMode="true">
+  <md-sidenav #start2 opened mode="side">
+    Drawer
+  </md-sidenav>
+
+  <div class="demo-sidenav-content">
+    The sidenav will responsively open and close, resize your window!
+    <button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
+  </div>
+</md-sidenav-container>
+
 <h2>Dynamic Alignment Sidenav</h2>
 
 <md-sidenav-container class="demo-sidenav-container">

src/lib/sidenav/sidenav.ts

@@ -23,6 +23,7 @@ import {
   OnDestroy,
   Inject,
   ChangeDetectorRef,
+  HostListener
 } from '@angular/core';
 import {animate, state, style, transition, trigger, AnimationEvent} from '@angular/animations';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
@@ -316,6 +317,35 @@ export class MdSidenavContainer implements AfterContentInit {
   /** The sidenav child with the `end` alignment. */
   get end() { return this._end; }
 
+  /**
+   * Width of the container at which it breaks
+   * e.g., breakpointWidth="500"
+   */
+  @Input() breakpointWidth: number;
+
+  /** Mode of the breakpoint; either true or false */
+  @Input() breakpointChangeMode: true | false = true;
+
+  /**
+   * Responsively toggle the sidenav using the breakpoint.
+   * Note that this only works when the window is rezied.
+   * If you resize it some other way, call checkBreakpoint().
+   */
+  @HostListener('window:resize', ['$event'])
+  checkBreakpoint() {
+    if (this._element.nativeElement.offsetWidth < this.breakpointWidth) {
+      if (this.breakpointChangeMode)
+        this._sidenavs.forEach(sidenav => sidenav.mode = "over");
+      this.close();
+    }
+    if (this._element.nativeElement.offsetWidth > this.breakpointWidth) {
+      if (this.breakpointChangeMode)        
+        this._sidenavs.forEach(sidenav => sidenav.mode = "side");
+      this.open();
+    }
+    this._updateStyles();
+  }
+
   /** Event emitted when the sidenav backdrop is clicked. */
   @Output() backdropClick = new EventEmitter<void>();
 
@@ -353,6 +383,7 @@ export class MdSidenavContainer implements AfterContentInit {
         this._watchSidenavAlign(sidenav);
       });
     });
+    this.checkBreakpoint();
   }
 
   /** Calls `open` of both start and end sidenavs */