feat(examples): add sidenav example

examples/all.ts

@@ -22,6 +22,7 @@ import ListBasicUsage from "./components/list/basic_usage";
 import InputBasicUsage from "./components/input/basic_usage";
 import InputFormBuilder from "./components/input/form_builder";
 import WhiteframeBasicUsage from "./components/whiteframe/basic_usage";
+import SidenavBasicUsage from "./components/sidenav/basic_usage";
 
 /**
  * Collection of Material Design component example directives.
@@ -41,6 +42,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   ToolbarBasicUsage, ToolbarScrollShrink,
   ProgressLinearBasicUsage,
   ProgressCircularBasicUsage,
+  SidenavBasicUsage,
   WhiteframeBasicUsage
 ]);
 

examples/components/sidenav/basic_usage.html

@@ -0,0 +1,73 @@
+<div layout="column" style="height:500px;">
+
+  <md-sidenav-container layout="row" flex>
+
+    <md-sidenav name="left" [style]="hasMedia('gt-sm') ? 'side' : 'over'">
+
+      <md-toolbar class="md-theme-indigo">
+        <h1 class="md-toolbar-tools">Sidenav Left</h1>
+      </md-toolbar>
+      <md-content layout-padding>
+        <button md-raised-button (click)="close('left')" class="md-primary" hide-gt-md>
+          Close Sidenav Left
+        </button>
+        <p hide-md show-gt-md>
+          This sidenav is locked open on your device. To go back to the default behavior,
+          narrow your display.
+        </p>
+      </md-content>
+
+    </md-sidenav>
+
+    <md-content flex layout-padding>
+
+      <div layout="column" layout-fill layout-align="top center">
+        <p>
+          The left sidenav will 'lock open' on a medium (>=960px wide) device.
+        </p>
+        <p>
+          The right sidenav will focus on a specific child element.
+        </p>
+
+        <div>
+          <button md-raised-button (click)="open('left')"
+                     class="md-primary" hide-gt-md>
+            Toggle left
+          </button>
+        </div>
+
+        <div>
+          <button md-raised-button (click)="open('right')"
+                     [hidden]="rightOpened"
+                     class="md-primary">
+            Toggle right
+          </button>
+        </div>
+      </div>
+
+      <div flex></div>
+
+    </md-content>
+
+    <md-sidenav name="right" align="right" layout="column">
+      <md-toolbar class="md-theme-light">
+        <h1 class="md-toolbar-tools">Sidenav Right</h1>
+      </md-toolbar>
+      <md-content layout-padding>
+        <form>
+          <md-input-container class="md-block">
+            <label for="testInput">Test input</label>
+            <input type="text" id="testInput" md-input
+                   [(value)]="data" md-autofocus>
+          </md-input-container>
+        </form>
+        <button md-raised-button (click)="close('right')" class="md-primary">
+          Close Sidenav Right
+        </button>
+      </md-content>
+
+    </md-sidenav>
+
+  </md-sidenav-container>
+
+</div>

examples/components/sidenav/basic_usage.ts

@@ -0,0 +1,28 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES, Media, SidenavService} from 'ng2-material/all';
+
+
+
+@Component({selector: 'sidenav-basic-usage'})
+@View({
+  templateUrl: 'examples/components/sidenav/basic_usage.html',
+  styleUrls: ['examples/components/sidenav/basic_usage.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class SidenavBasicUsage {
+
+  constructor(public sidenav:SidenavService) {
+
+  }
+
+  hasMedia(breakSize:string):boolean {
+    return Media.hasMedia(breakSize);
+  }
+
+  open(name:string) {
+    this.sidenav.show(name);
+  }
+  close(name:string) {
+    this.sidenav.hide(name);
+  }
+}

examples/example.scss

@@ -8,10 +8,12 @@ example {
   md-example-view {
     display: block;
     background-color: white;
+    @include md-stacking-context();
   }
 }
 
 .demo-container {
+  overflow: hidden;
   .demo-toolbar {
     button[md-button] {
       color: rgba(255, 255, 255, 0.6);

ng2-material/components/sidenav/sidenav.scss

@@ -7,7 +7,7 @@ $sidenav-desktop-width: 400px !default;
 $sidenav-min-space: 56px !default;
 
 md-sidenav-container {
-  overflow-x: hidden;
+  overflow: hidden;
   padding-left: 0;
   transition: none;
   will-change: padding-left;
@@ -18,6 +18,7 @@ md-sidenav-container {
 }
 
 md-sidenav {
+  @include md-stacking-context();
   box-sizing: border-box;
   position: fixed;
   z-index: $z-index-sidenav;
@@ -47,8 +48,6 @@ md-sidenav {
     transform: translate3d(0, 0, 0);
   }
 
-
-
   @extend .md-sidenav-left;
 }