change sidenav demo to drawer

Author: mmalerba

src/demo-app/demo-app/demo-app.ts

@@ -53,6 +53,7 @@ export class DemoApp {
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Datepicker', route: '/datepicker'},
     {name: 'Dialog', route: '/dialog'},
+    {name: 'Drawer', route: '/drawer'},
     {name: 'Expansion Panel', route: '/expansion'},
     {name: 'Gestures', route: '/gestures'},
     {name: 'Grid List', route: '/grid-list'},
@@ -68,7 +69,6 @@ export class DemoApp {
     {name: 'Radio', route: '/radio'},
     {name: 'Ripple', route: '/ripple'},
     {name: 'Select', route: '/select'},
-    {name: 'Sidenav', route: '/sidenav'},
     {name: 'Slider', route: '/slider'},
     {name: 'Slide Toggle', route: '/slide-toggle'},
     {name: 'Snack Bar', route: '/snack-bar'},

src/demo-app/demo-app/demo-module.ts

@@ -26,7 +26,7 @@ import {ButtonDemo} from '../button/button-demo';
 import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {SelectDemo} from '../select/select-demo';
 import {SliderDemo} from '../slider/slider-demo';
-import {SidenavDemo} from '../sidenav/sidenav-demo';
+import {DrawerDemo} from '../drawer/drawer-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
 import {MenuDemo} from '../menu/menu-demo';
@@ -88,7 +88,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     RotiniPanel,
     ScienceJoke,
     SelectDemo,
-    SidenavDemo,
+    DrawerDemo,
     SliderDemo,
     SlideToggleDemo,
     SpagettiPanel,

src/demo-app/demo-app/routes.ts

@@ -16,7 +16,7 @@ import {PortalDemo} from '../portal/portal-demo';
 import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
 import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
 import {SelectDemo} from '../select/select-demo';
-import {SidenavDemo} from '../sidenav/sidenav-demo';
+import {DrawerDemo} from '../drawer/drawer-demo';
 import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
 import {SliderDemo} from '../slider/slider-demo';
 import {RadioDemo} from '../radio/radio-demo';
@@ -51,7 +51,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'datepicker', component: DatepickerDemo},
     {path: 'radio', component: RadioDemo},
     {path: 'select', component: SelectDemo},
-    {path: 'sidenav', component: SidenavDemo},
+    {path: 'drawer', component: DrawerDemo},
     {path: 'slide-toggle', component: SlideToggleDemo},
     {path: 'slider', component: SliderDemo},
     {path: 'progress-spinner', component: ProgressSpinnerDemo},

src/demo-app/sidenav/sidenav-demo.html renamed to src/demo-app/drawer/drawer-demo.html

@@ -1,7 +1,7 @@
 <h2>Basic Use Case</h2>
 
-<md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #start (open)="myinput.focus()" mode="side">
+<md-drawer-container class="demo-drawer-container">
+  <md-drawer #start (open)="myinput.focus()" mode="side">
     Start Side Drawer
     <br>
     <button md-button (click)="start.close()">Close</button>
@@ -13,19 +13,19 @@ <h2>Basic Use Case</h2>
     <div>Mode: {{start.mode}}</div>
     <br>
     <input #myinput>
-  </md-sidenav>
+  </md-drawer>
 
-  <md-sidenav #end position="end">
+  <md-drawer #end position="end">
     End Side Drawer
     <br>
     <button md-button (click)="end.close()">Close</button>
-  </md-sidenav>
+  </md-drawer>
 
-  <div class="demo-sidenav-content">
+  <div class="demo-drawer-content">
     <h1>My Content</h1>
 
     <div>
-      <header>Sidenav</header>
+      <header>Drawer</header>
       <button md-button (click)="start.toggle()">Toggle Start Side Drawer</button>
       <button md-button (click)="end.toggle()">Toggle End Side Drawer</button>
     </div>
@@ -34,38 +34,38 @@ <h1>My Content</h1>
     <button md-raised-button class="mat-primary">HELLO</button>
     <button md-fab class="mat-accent">HI</button>
   </div>
-</md-sidenav-container>
+</md-drawer-container>
 
-<h2>Sidenav Already Opened</h2>
+<h2>Drawer Already Opened</h2>
 
-<md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #start2 opened mode="side">
+<md-drawer-container class="demo-drawer-container">
+  <md-drawer #start2 opened mode="side">
     Drawer
-  </md-sidenav>
+  </md-drawer>
 
-  <div class="demo-sidenav-content">
+  <div class="demo-drawer-content">
     <button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
   </div>
-</md-sidenav-container>
+</md-drawer-container>
 
-<h2>Dynamic Position Sidenav</h2>
+<h2>Dynamic Position Drawer</h2>
 
-<md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #dynamicPosSidenav1 mode="side" [position]="invert ? 'end' : 'start'">Start</md-sidenav>
-  <md-sidenav #dynamicPosSidenav2 mode="side" [position]="invert ? 'start' : 'end'">End</md-sidenav>
+<md-drawer-container class="demo-drawer-container">
+  <md-drawer #dynamicPosDrawer1 mode="side" [position]="invert ? 'end' : 'start'">Start</md-drawer>
+  <md-drawer #dynamicPosDrawer2 mode="side" [position]="invert ? 'start' : 'end'">End</md-drawer>
 
-  <div class="demo-sidenav-content">
-    <button (click)="dynamicPosSidenav1.toggle(); dynamicPosSidenav2.toggle()">
-      Toggle sidenavs
+  <div class="demo-drawer-content">
+    <button (click)="dynamicPosDrawer1.toggle(); dynamicPosDrawer2.toggle()">
+      Toggle drawers
     </button>
     <button (click)="invert = !invert">Change sides</button>
   </div>
-</md-sidenav-container>
+</md-drawer-container>
 
-<h2>Sidenav with focus attributes</h2>
+<h2>Drawer with focus attributes</h2>
 
-<md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #focusSidenav>
+<md-drawer-container class="demo-drawer-container">
+  <md-drawer #focusDrawer>
     <md-nav-list>
       <a md-list-item routerLink>Link</a>
       <a md-list-item routerLink cdk-focus-region-start>Focus region start</a>
@@ -74,14 +74,14 @@ <h2>Sidenav with focus attributes</h2>
       <a md-list-item routerLink cdk-focus-region-end>Focus region end</a>
       <a md-list-item routerLink>Link</a>
     </md-nav-list>
-  </md-sidenav>
+  </md-drawer>
 
-  <div class="demo-sidenav-content">
+  <div class="demo-drawer-content">
     <h1>My Content</h1>
 
     <div>
-      <header>Sidenav</header>
-      <button md-button (click)="focusSidenav.toggle()">Toggle Drawer</button>
+      <header>Drawer</header>
+      <button md-button (click)="focusDrawer.toggle()">Toggle Drawer</button>
     </div>
   </div>
-</md-sidenav-container>
+</md-drawer-container>

src/demo-app/drawer/drawer-demo.scss

@@ -0,0 +1,7 @@
+.demo-drawer-container {
+  border: 3px solid black;
+}
+
+.demo-drawer-content {
+  padding: 15px;
+}

src/demo-app/sidenav/sidenav-demo.ts renamed to src/demo-app/drawer/drawer-demo.ts

@@ -3,11 +3,11 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   moduleId: module.id,
-  selector: 'sidenav-demo',
-  templateUrl: 'sidenav-demo.html',
-  styleUrls: ['sidenav-demo.css'],
+  selector: 'drawer-demo',
+  templateUrl: 'drawer-demo.html',
+  styleUrls: ['drawer-demo.css'],
   encapsulation: ViewEncapsulation.None,
 })
-export class SidenavDemo {
+export class DrawerDemo {
   invert = false;
 }