Add styles for component-viewer sidenav (#34)

* basic styles and structure for sidenav

* theming for sidenav

* Move sidenav styles to separate files, some refactoring

* Remove leftover comment

* Re-add "./" to theme mixin import

Author: alexwolfe-tp

src/_app-theme.scss

@@ -1,5 +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/shared/navbar/navbar-theme';
 
 // Styles for the docs app that are based on the current theme.
@@ -15,5 +16,6 @@
   }
 
   @include nav-bar-theme($theme);
+  @include component-viewer-sidenav-theme($theme);
   @include home-page-theme($theme);
 }

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

@@ -0,0 +1,39 @@
+@import '~@angular/material/core/theming/theming';
+
+@mixin component-viewer-sidenav-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $sidenav: '.docs-component-viewer-sidenav'; 
+
+
+  .docs-component-viewer-sidenav {
+    background: rgba(md-color($foreground, secondary-text), .04);
+
+
+    // Section divider
+    h3 {
+      background: rgba(md-color($foreground, secondary-text), .32);
+      color: md-color($primary, default-contrast);
+    }
+
+    // Sidenav navigation items
+    li {
+      border-color: rgba(md-color($foreground, secondary-text), .06);
+      color: md-color($foreground, secondary-text);
+
+      > a {
+      color: md-color($foreground, secondary-text);
+
+        &.is-selected, 
+        &:hover, 
+        &:focus {
+          background: md-color($background, background);
+          color: md-color($primary);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+$sidenav-spacing-unit: 8px;
+$sidenav-width: 240px;
+
+.docs-component-viewer-sidenav {
+  box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
+  padding-bottom: 72px;
+  width: $sidenav-width;
+  bottom: 0;
+  overflow: auto;
+
+  &.md-sidenav-opened {
+    box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
+  }
+
+  // Section divider
+  h3 {
+    border: none;
+    font-size: 10px;
+    letter-spacing: 1px;
+    line-height: $sidenav-spacing-unit * 3;
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0;
+    padding: 0 ($sidenav-spacing-unit * 2);
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // Sidenav navigation item
+  li {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    margin: 0;
+    padding: 0;
+
+
+    // Hide the border on the last item
+    &:last-child {
+      border-color: transparent;
+    }
+
+    > a {
+      box-sizing: border-box;
+      display: block;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: ($sidenav-spacing-unit * 6) - 1;
+      text-decoration: none;
+      transition: all .3s;
+      padding: 0 ($sidenav-spacing-unit * 2);
+      position: relative;
+
+      &.docs-component-viewer-sidenav-item-selected {
+        font-weight: 600;
+      }
+    }
+  }
+}

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

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

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

@@ -1,13 +1,3 @@
-.docs-component-viewer-sidenav {
-  &.md-sidenav-opened {
-    box-shadow: none;
-  }
-
-  border-right: 1px solid black;
-  width: 300px;
-  margin: 20px;
-}
-
 .docs-component-viewer-header {
   margin: 50px;
 }

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

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

src/main.scss

@@ -5,6 +5,7 @@
 // Include material core styles.
 @include md-core();
 
+
 // Define the light theme.
 $primary: md-palette($md-cyan);
 $accent:  md-palette($md-amber, A200, A100, A400);