Refactor component sidenav into standalone component (#44)

Author: mmalerba

src/_app-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/core/theming/theming';
 @import './app/pages/homepage/homepage-theme';
-@import './app/pages/component-viewer/component-viewer-sidenav-theme';
+@import './app/pages/component-sidenav/component-sidenav-theme';
 @import './app/pages/component-viewer/component-viewer-theme';
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';

src/app/app-module.ts

@@ -12,13 +12,15 @@ import {ComponentViewer} from './pages/component-viewer/component-viewer';
 import {ExampleModule} from './examples/example-module';
 import {SharedModule} from './shared/shared-module';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
+import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
 
 
 @NgModule({
   declarations: [
     MaterialDocsApp,
     ComponentCategoryList,
     ComponentList,
+    ComponentSidenav,
     ComponentViewer,
     Homepage,
   ],

src/app/pages/component-category-list/component-category-list.html

@@ -1,7 +1,7 @@
 <md-card
     *ngFor="let category of docItems.getItemsInCategories()"
     class="docs-component-category-list-category"
-    routerLink="/components/{{category.id}}">
+    [routerLink]="['/components/category/', category.id]">
   <md-card-title>{{category.name}}</md-card-title>
   <p>{{category.summary}}</p>
   <img md-card-image src="../../../assets/img/component-categories/{{category.id}}.svg">

src/app/pages/component-list/component-list.html

@@ -2,7 +2,7 @@
   <h2>{{category.name}}</h2>
   <a *ngFor="let component of category.items"
       class="docs-component-list-item"
-      [routerLink]="['/component/', component.id]">
+      [routerLink]="['/components/component/', component.id]">
     <img src="../../../assets/img/components/{{component.id}}.svg"
         class="docs-component-list-item-icon"
         [alt]="component.name">

src/app/pages/component-viewer/_component-viewer-sidenav-theme.scss renamed to src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -0,0 +1,17 @@
+<md-sidenav-layout>
+  <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
+    <nav *ngFor="let category of docItems.getItemsInCategories()">
+      <h3>{{category.name}}</h3>
+      <ul>
+        <li *ngFor="let component of category.items">
+          <a [routerLink]="['/components/component/', component.id]"
+             routerLinkActive="docs-component-viewer-sidenav-item-selected">
+            {{component.name}}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </md-sidenav>
+
+  <router-outlet></router-outlet>
+</md-sidenav-layout>

src/app/pages/component-sidenav/component-sidenav.html

@@ -0,0 +1,14 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
+
+
+@Component({
+  selector: 'app-component-sidenav',
+  templateUrl: './component-sidenav.html',
+  styleUrls: ['./component-sidenav.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ComponentSidenav {
+  constructor(public docItems: DocumentationItems) {}
+}

src/app/pages/component-viewer/component-viewer-sidenav.scss renamed to src/app/pages/component-sidenav/component-sidenav.scss

@@ -1,38 +1,22 @@
-<md-sidenav-layout>
-  <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
-    <nav *ngFor="let category of docItems.getItemsInCategories()">
-      <h3>{{category.name}}</h3>
-      <ul>
-        <li *ngFor="let component of category.items">
-          <a [routerLink]="['/component/', component.id]"
-              routerLinkActive="docs-component-viewer-sidenav-item-selected">
-            {{component.name}}
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </md-sidenav>
+<div class="docs-component-viewer-header">
+  <h1> Component - {{componentDocItem.name}} </h1>
+</div>
 
-  <div class="docs-component-viewer-header">
-    <h1> Component - {{componentDocItem.name}} </h1>
-  </div>
+<!-- TODO(jelbourn): turn this into nav tabs -->
+<md-tab-group class="docs-component-viewer-tabbed-content">
+  <md-tab label="OVERVIEW">
+    <doc-viewer documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html" class="docs-component-view-text-content">
+    </doc-viewer>
+  </md-tab>
 
-  <!-- TODO(jelbourn): turn this into nav tabs -->
-  <md-tab-group class="docs-component-viewer-tabbed-content">
-    <md-tab label="OVERVIEW">
-      <doc-viewer documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html" class="docs-component-view-text-content">
-      </doc-viewer>
-    </md-tab>
+  <md-tab label="API REFERENCE">
+    <doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"  class="docs-component-view-text-content"></doc-viewer>
+  </md-tab>
 
-    <md-tab label="API REFERENCE">
-      <doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"  class="docs-component-view-text-content"></doc-viewer>
-    </md-tab>
+  <md-tab label="EXAMPLES">
 
-    <md-tab label="EXAMPLES">
+    <example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
+    </example-viewer>
 
-      <example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
-      </example-viewer>
-
-    </md-tab>
-  </md-tab-group>
-</md-sidenav-layout>
+  </md-tab>
+</md-tab-group>

src/app/pages/component-sidenav/component-sidenav.ts

@@ -6,7 +6,7 @@ import {DocumentationItems, DocItem} from '../../shared/documentation-items/docu
 @Component({
   selector: 'app-component-viewer',
   templateUrl: './component-viewer.html',
-  styleUrls: ['./component-viewer.scss', './component-viewer-sidenav.scss'],
+  styleUrls: ['./component-viewer.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentViewer {