Add rough structure and styles for component-viewer

Author: jelbourn

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

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

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

@@ -1 +1,23 @@
-{{componentId}}
+<md-sidenav-layout>
+  <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
+    component list
+  </md-sidenav>
+
+  <h1 class="docs-component-viewer-header">
+    Button
+  </h1>
+
+  <md-tab-group class="docs-component-viewer-tabbed-content">
+    <md-tab label="OVERVIEW">
+      overview
+    </md-tab>
+
+    <md-tab label="API">
+      api
+    </md-tab>
+
+    <md-tab label="EXAMPLES">
+      examples
+    </md-tab>
+  </md-tab-group>
+</md-sidenav-layout>

src/app/pages/component-viewer/component-viewer.scss

@@ -0,0 +1,21 @@
+.docs-component-viewer-sidenav {
+  &.md-sidenav-opened {
+    box-shadow: none;
+  }
+
+  border-right: 1px solid black;
+
+  width: 300px;
+}
+
+.docs-component-viewer-header {
+  margin: 50px;
+}
+
+.docs-component-viewer-tabbed-content {
+  margin: 50px;
+
+  md-tab {
+    margin: 30px;
+  }
+}

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

@@ -1,10 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
+
 @Component({
   selector: 'app-components',
   templateUrl: './component-viewer.html',
-  styleUrls: ['./component-viewer.scss']
+  styleUrls: ['./component-viewer.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class ComponentViewer {
   componentId: string;