chore: close sidenav on nav item click (#1535)

Author: andrewseguin

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

@@ -1,34 +1,20 @@
 <md-sidenav-layout class="demo-root" fullscreen>
   <md-sidenav #start>
     <md-nav-list>
-      <a md-list-item [routerLink]="['button']">Button</a>
-      <a md-list-item [routerLink]="['button-toggle']">Button Toggle</a>
-      <a md-list-item [routerLink]="['card']">Card</a>
-      <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
-      <a md-list-item [routerLink]="['dialog']">Dialog</a>
-      <a md-list-item [routerLink]="['gestures']">Gestures</a>
-      <a md-list-item [routerLink]="['grid-list']">Grid List</a>
-      <a md-list-item [routerLink]="['icon']">Icon</a>
-      <a md-list-item [routerLink]="['input']">Input</a>
-      <a md-list-item [routerLink]="['list']">List</a>
-      <a md-list-item [routerLink]="['menu']">Menu</a>
-      <a md-list-item [routerLink]="['live-announcer']">Live Announcer</a>
-      <a md-list-item [routerLink]="['overlay']">Overlay</a>
-      <a md-list-item [routerLink]="['portal']">Portal</a>
-      <a md-list-item [routerLink]="['progress-bar']">Progress Bar</a>
-      <a md-list-item [routerLink]="['progress-circle']">Progress Circle</a>
-      <a md-list-item [routerLink]="['radio']">Radio</a>
-      <a md-list-item [routerLink]="['ripple']">Ripple</a>
-      <a md-list-item [routerLink]="['select']">Select</a>
-      <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
-      <a md-list-item [routerLink]="['slider']">Slider</a>
-      <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
-      <a md-list-item [routerLink]="['snack-bar']">Snack Bar</a>
-      <a md-list-item [routerLink]="['tabs']">Tabs</a>
-      <a md-list-item [routerLink]="['toolbar']">Toolbar</a>
-      <a md-list-item [routerLink]="['tooltip']">Tooltip</a>
+      <a *ngFor="let navItem of navItems"
+         md-list-item
+         (click)="start.close()"
+         [routerLink]="[navItem.route]">
+        {{navItem.name}}
+      </a>
+
       <hr>
-      <a md-list-item [routerLink]="['baseline']">Baseline</a>
+
+      <a md-list-item
+         (click)="start.close()"
+         [routerLink]="['baseline']">
+        Baseline
+      </a>
     </md-nav-list>
     <button md-button (click)="start.close()">CLOSE</button>
   </md-sidenav>

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

@@ -18,4 +18,33 @@ export class Home {}
   styleUrls: ['demo-app.css'],
   encapsulation: ViewEncapsulation.None,
 })
-export class DemoApp { }
+export class DemoApp {
+  navItems = [
+    {name: 'Button', route: 'button'},
+    {name: 'Button Toggle', route: 'button-toggle'},
+    {name: 'Card', route: 'card'},
+    {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Dialog', route: 'dialog'},
+    {name: 'Gestures', route: 'gestures'},
+    {name: 'Grid List', route: 'grid-list'},
+    {name: 'Icon', route: 'icon'},
+    {name: 'Input', route: 'input'},
+    {name: 'List', route: 'list'},
+    {name: 'Menu', route: 'menu'},
+    {name: 'Live Announcer', route: 'live-announcer'},
+    {name: 'Overlay', route: 'overlay'},
+    {name: 'Portal', route: 'portal'},
+    {name: 'Progress Bar', route: 'progress-bar'},
+    {name: 'Progress Circle', route: 'progress-circle'},
+    {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'},
+    {name: 'Tabs', route: 'tabs'},
+    {name: 'Toolbar', route: 'toolbar'},
+    {name: 'Tooltip', route: 'tooltip'}
+  ];
+}