New example for side navigation is added

src/app/examples/example-module.ts

@@ -54,6 +54,7 @@ import {
 } from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {IconSvgExample} from './icon-svg-example/icon-svg-example';
 import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example';
+import {SidenavNavigationListExample} from './sidenav-navigation-list/sidenav-navigation-list-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {
   ProgressSpinnerOverviewExample
@@ -135,6 +136,7 @@ export const EXAMPLE_COMPONENTS = {
   'select-overview': {title: 'Basic select', component: SelectOverviewExample},
   'select-form': {title: 'Select in a form', component: SelectFormExample},
   'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample},
+  'sidenav-navigation-list':{title: 'Sidenav with Navigation List',component:SidenavNavigationListExample},
   'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample},
   'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample},
   'slider-overview': {title: 'Basic slider', component: SliderOverviewExample},
@@ -193,6 +195,7 @@ export const EXAMPLE_LIST = [
   RadioNgModelExample,
   RadioOverviewExample,
   SidenavFabExample,
+  SidenavNavigationListExample,
   SelectOverviewExample,
   SelectFormExample,
   SidenavOverviewExample,

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.css

@@ -0,0 +1,22 @@
+.example-sidenav-navigation-list-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-navigation-list-container md-sidenav {
+  max-width: 200px;
+}
+
+.example-sidenav-navigation-list-container .mat-sidenav-content,
+.example-sidenav-navigation-list-container md-sidenav {
+  display: flex;
+  overflow: visible;
+}
+
+.example-scrolling-content {
+  overflow: auto;
+  padding:5px;
+}
+
+

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.html

@@ -0,0 +1,21 @@
+<md-sidenav-container class="example-sidenav-navigation-list-container">
+  <md-sidenav #sidenav mode="side" opened="true">
+    <md-toolbar color="primary">Title for the app</md-toolbar>
+    <md-nav-list>
+      <md-list-item *ngFor="let link of links">
+        <a md-line>{{ link.name }}</a>
+
+      </md-list-item>
+    </md-nav-list>
+  </md-sidenav>
+
+  <div class="example-scrolling-content">
+    <p>
+    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+    etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+    id wisi turpis magna aliquam magna.</p>
+    <button md-raised-button color="primary" (click)="sidenav.toggle()">
+      Sidenav Toggle
+    </button>
+  </div>
+</md-sidenav-container>

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.ts

@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+  selector: 'sidenav-navigation-list-example',
+  templateUrl: './sidenav-navigation-list-example.html',
+  styleUrls: ['./sidenav-navigation-list-example.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SidenavNavigationListExample {
+  links = [
+    {
+      'name':'Google',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Wikipedia',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Github',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Facebook',
+      'url' : '/components/component/sidenav'
+    }
+  ]
+}

src/app/shared/documentation-items/documentation-items.ts

@@ -33,7 +33,7 @@ const DOCS = [
     summary: 'Sidenavs, toolbars, menus',
     items: [
       {id: 'menu', name: 'Menu', examples: ['menu-icons']},
-      {id: 'sidenav', name: 'Sidenav', examples: ['sidenav-fab']},
+      {id: 'sidenav', name: 'Sidenav', examples: ['sidenav-fab','sidenav-navigation-list']},
       {id: 'toolbar', name: 'Toolbar', examples: ['toolbar-multirow']},
     ]
   },

src/assets/examples/sidenav-navigation-list-example-css.html

@@ -0,0 +1,22 @@
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> {
+  <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
+  <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
+  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">rgba</span>(0, 0, 0, 0.5);
+}
+
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-tag">md-sidenav</span> {
+  <span class="hljs-attribute">max-width</span>: <span class="hljs-number">200px</span>;
+}
+
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-class">.mat-sidenav-content</span>,
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-tag">md-sidenav</span> {
+  <span class="hljs-attribute">display</span>: flex;
+  <span class="hljs-attribute">overflow</span>: visible;
+}
+
+<span class="hljs-selector-class">.example-scrolling-content</span> {
+  <span class="hljs-attribute">overflow</span>: auto;
+  <span class="hljs-attribute">padding</span>:<span class="hljs-number">5px</span>;
+}
+
+

src/assets/examples/sidenav-navigation-list-example-html.html

@@ -0,0 +1,21 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-sidenav-navigation-list-container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav</span> #<span class="hljs-attr">sidenav</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"side"</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">"true"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">md-toolbar</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span>&gt;</span>Title for the app<span class="hljs-tag">&lt;/<span class="hljs-name">md-toolbar</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">md-nav-list</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">md-list-item</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let link of links"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">md-line</span>&gt;</span>{{ link.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+      <span class="hljs-tag">&lt;/<span class="hljs-name">md-list-item</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">md-nav-list</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-scrolling-content"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+    etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+    id wisi turpis magna aliquam magna.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">md-raised-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"sidenav.toggle()"</span>&gt;</span>
+      Sidenav Toggle
+    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav-container</span>&gt;</span>

src/assets/examples/sidenav-navigation-list-example-ts.html

@@ -0,0 +1,29 @@
+<span class="hljs-keyword">import</span> {Component, ViewEncapsulation} from <span class="hljs-string">'@angular/core'</span>;
+
+
+<span class="hljs-meta">@Component</span>({
+  selector: <span class="hljs-string">'sidenav-navigation-list-example'</span>,
+  templateUrl: <span class="hljs-string">'./sidenav-navigation-list-example.html'</span>,
+  styleUrls: [<span class="hljs-string">'./sidenav-navigation-list-example.css'</span>],
+  encapsulation: ViewEncapsulation.None,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SidenavNavigationListExample {
+  links = [
+    {
+      <span class="hljs-string">'name'</span>:<span class="hljs-string">'Google'</span>,
+      <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+    },
+    {
+      <span class="hljs-string">'name'</span>:<span class="hljs-string">'Wikipedia'</span>,
+      <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+    },
+    {
+      <span class="hljs-string">'name'</span>:<span class="hljs-string">'Github'</span>,
+      <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+    },
+    {
+      <span class="hljs-string">'name'</span>:<span class="hljs-string">'Facebook'</span>,
+      <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+    }
+  ]
+}

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.css

@@ -0,0 +1,22 @@
+.example-sidenav-navigation-list-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-navigation-list-container md-sidenav {
+  max-width: 200px;
+}
+
+.example-sidenav-navigation-list-container .mat-sidenav-content,
+.example-sidenav-navigation-list-container md-sidenav {
+  display: flex;
+  overflow: visible;
+}
+
+.example-scrolling-content {
+  overflow: auto;
+  padding:5px;
+}
+
+

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.html

@@ -0,0 +1,21 @@
+<md-sidenav-container class="example-sidenav-navigation-list-container">
+  <md-sidenav #sidenav mode="side" opened="true">
+    <md-toolbar color="primary">Title for the app</md-toolbar>
+    <md-nav-list>
+      <md-list-item *ngFor="let link of links">
+        <a md-line>{{ link.name }}</a>
+
+      </md-list-item>
+    </md-nav-list>
+  </md-sidenav>
+
+  <div class="example-scrolling-content">
+    <p>
+    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+    etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+    id wisi turpis magna aliquam magna.</p>
+    <button md-raised-button color="primary" (click)="sidenav.toggle()">
+      Sidenav Toggle
+    </button>
+  </div>
+</md-sidenav-container>

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.ts

@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+  selector: 'sidenav-navigation-list-example',
+  templateUrl: './sidenav-navigation-list-example.html',
+  styleUrls: ['./sidenav-navigation-list-example.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SidenavNavigationListExample {
+  links = [
+    {
+      'name':'Google',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Wikipedia',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Github',
+      'url' : '/components/component/sidenav'
+    },
+    {
+      'name':'Facebook',
+      'url' : '/components/component/sidenav'
+    }
+  ]
+}