fix(sidenav): fullscreen sidenavs should not scroll

Author: kara

src/components/sidenav/sidenav.scss

@@ -64,6 +64,10 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
     @include md-sidenav-fullscreen();
+
+    &.md-sidenav-opened {
+      overflow: hidden;
+    }
   }
 
   // Need this to take up space in the layout.
@@ -109,6 +113,9 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
     z-index: 3;
     min-width: 5%;
 
+    // TODO(kara): revisit scrolling behavior for sidenavs
+    overflow-y: auto;
+
     background-color: $md-sidenav-background-color;
 
     @include md-sidenav-transition(0, -100%);

src/components/sidenav/sidenav.ts

@@ -49,7 +49,7 @@ export class MdSidenav {
   @Input() mode: 'over' | 'push' | 'side' = 'over';
 
   /** Whether the sidenav is opened. */
-  @Input('opened') private _opened: boolean;
+  @Input('opened') private _opened: boolean = false;
 
   /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */
   @Output('open-start') onOpenStart = new EventEmitter<void>();
@@ -318,9 +318,13 @@ export class MdSidenavLayout implements AfterContentInit {
     }
   }
 
-  private _isShowingBackdrop() {
-    return (this._start != null && this._start.mode != 'side' && this._start.opened)
-        || (this._end != null && this._end.mode != 'side' && this._end.opened);
+  private _isShowingBackdrop(): boolean {
+    return (this._isSidenavOpen(this._start) && this._start.mode != 'side')
+        || (this._isSidenavOpen(this._end) && this._end.mode != 'side');
+  }
+
+  private _isSidenavOpen(side: MdSidenav): boolean {
+    return side != null && side.opened;
   }
 
   /**
@@ -330,10 +334,7 @@ export class MdSidenavLayout implements AfterContentInit {
    * @private
    */
   private _getSidenavEffectiveWidth(sidenav: MdSidenav, mode: string): number {
-    if (sidenav != null && sidenav.mode == mode && sidenav.opened) {
-      return sidenav._width;
-    }
-    return 0;
+    return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0;
   }
 
   private _getMarginLeft() {
@@ -351,6 +352,10 @@ export class MdSidenavLayout implements AfterContentInit {
   private _getPositionRight() {
     return this._getSidenavEffectiveWidth(this._right, 'push');
   }
+
+  @HostBinding('class.md-sidenav-opened') private get _isOpened() {
+    return this._isShowingBackdrop();
+  }
 }
 
 

src/demo-app/demo-app.scss

@@ -9,13 +9,13 @@
   }
 
   md-sidenav {
-    width: 15%;
+    min-width: 15%;
 
     [md-button] {
       width: 100%;
-      position: absolute;
+      position: relative;
       bottom: 0;
-      margin-bottom: 24px;
+      margin: 24px 0;
     }
   }
 
@@ -39,5 +39,4 @@
   h1 {
     font-size: 20px;
   }
-}
-
+}