Simplify application routes

Author: jelbourn

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

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

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

@@ -1,7 +1,7 @@
 <div class="docs-component-list-category">
   <a *ngFor="let component of category.items"
     class="docs-component-list-item"
-    [routerLink]="['/components/component/', component.id]">
+    [routerLink]="['/components/', component.id]">
     <docs-svg-viewer class="docs-component-list-item-icon"
                      [attr.aria-label]="component.name"
                      [src]="'../../../assets/img/components/' + component.id + '.svg'">

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

@@ -6,7 +6,7 @@
       <h3>{{category.name}}</h3>
       <ul>
         <li *ngFor="let component of category.items">
-          <a [routerLink]="['/components/component/', component.id]"
+          <a [routerLink]="['/components/', component.id]"
              routerLinkActive="docs-component-viewer-sidenav-item-selected">
             {{component.name}}
           </a>

src/app/routes.ts

@@ -9,13 +9,22 @@ import {GuideViewer} from './pages/guide-viewer/guide-viewer';
 
 export const MATERIAL_DOCS_ROUTES: Routes = [
   {path: '', component: Homepage, pathMatch: 'full'},
+  {
+    path: 'categories',
+    component: ComponentSidenav,
+    children: [
+      {path: '', component: ComponentCategoryList},
+      {path: ':id', component: ComponentList},
+    ],
+  },
   {
     path: 'components',
     component: ComponentSidenav,
     children: [
       {path: '', component: ComponentCategoryList},
-      {path: 'category/:id', component: ComponentList},
-      {path: 'component/:id', component: ComponentViewer},
+      {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'},
+      {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'},
+      {path: ':id', component: ComponentViewer},
     ],
   },
   {path: 'guides', component: GuideList},