add sidenav toggle on mobile displays (#62)

* add sidenav toggle when mobile

* fix lint errors

Author: andrewseguin

src/app/app-module.ts

@@ -15,6 +15,8 @@ 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';
+import {ComponentPageTitle} from './pages/page-title/page-title';
+import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
 
 
 @NgModule({
@@ -24,6 +26,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
     ComponentList,
     ComponentSidenav,
     ComponentViewer,
+    ComponentPageHeader,
     GuideList,
     GuideViewer,
     Homepage,
@@ -39,6 +42,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
   ],
   providers: [
     Location,
+    ComponentPageTitle,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],

src/app/pages/component-category-list/_component-category-list-theme.scss

@@ -5,14 +5,6 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .docs-component-category-list-header {
-    background: md-color($primary);
-
-    h1 {
-      color: md-color($primary, default-contrast);
-    }
-  }
-
   .docs-component-category-list-card-summary {
     color: md-color($foreground, secondary-text);
   }

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

@@ -1,7 +1,3 @@
-<div class="docs-component-category-list-header">
-  <h1>Component Library</h1>
-</div>
-
 <div class="docs-component-category-list">
   <md-card
       *ngFor="let category of docItems.getItemsInCategories()"

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

@@ -1,5 +1,13 @@
+@import '../../../styles/constants';
+
 .docs-component-category-list {
   padding: 20px;
+
+  @media (max-width: $small-breakpoint-width) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
 }
 
 .docs-component-category-list-card {
@@ -24,6 +32,8 @@
 
 .docs-component-category-list-header {
   padding-left: 20px;
+  display: flex;
+  align-items: center;
 
   h1 {
     font-size: 30px;

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

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 
 @Component({
@@ -8,5 +9,10 @@ import {DocumentationItems} from '../../shared/documentation-items/documentation
   styleUrls: ['./component-category-list.scss']
 })
 export class ComponentCategoryList {
-  constructor(public docItems: DocumentationItems) {}
+  constructor(public docItems: DocumentationItems,
+              private _componentPageTitle: ComponentPageTitle) {}
+
+  ngOnInit() {
+    this._componentPageTitle.title = 'Component Library';
+  }
 }

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

@@ -1,7 +1,3 @@
-<div class="docs-primary-header">
-  <h1> {{category.name}} </h1>
-</div>
-
 <div class="docs-component-list-category">
   <a *ngFor="let component of category.items"
       class="docs-component-list-item"

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

@@ -1,8 +1,14 @@
 @import '~@angular/material/button/button-base';
-
+@import '../../../styles/constants';
 
 .docs-component-list-category {
   margin: 20px;
+
+  @media (max-width: $small-breakpoint-width) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
 }
 
 .docs-component-list-item {

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

@@ -4,6 +4,7 @@ import {
   DocCategory
 } from '../../shared/documentation-items/documentation-items';
 import {ActivatedRoute} from '@angular/router';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'app-components',
@@ -13,9 +14,12 @@ import {ActivatedRoute} from '@angular/router';
 export class ComponentList {
   category: DocCategory;
 
-  constructor(public docItems: DocumentationItems, private _route: ActivatedRoute) {
+  constructor(public docItems: DocumentationItems,
+              private _componentPageTitle: ComponentPageTitle,
+              private _route: ActivatedRoute) {
     _route.params.subscribe(p => {
       this.category = docItems.getCategoryById(p['id']);
+      this._componentPageTitle.title = this.category.name;
     });
   }
 }

src/app/pages/component-page-header/component-page-header.html

@@ -0,0 +1,7 @@
+<div class="docs-primary-header component-page-header">
+  <button md-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
+    <md-icon>menu</md-icon>
+  </button>
+
+  <h1>{{getTitle()}} </h1>
+</div>

src/app/pages/component-page-header/component-page-header.scss

@@ -0,0 +1,37 @@
+@import '../../../styles/constants';
+
+.component-page-header {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $small-breakpoint-width) {
+    padding-left: 0;
+  }
+}
+
+h1 {
+  @media (max-width: $small-breakpoint-width) {
+    padding: 24px 8px;
+    font-size: 20px;
+  }
+}
+
+.sidenav-toggle {
+  padding: 0;
+  margin: 8px;
+  min-width: 64px;
+  display: none;
+  @media (max-width: $small-breakpoint-width) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  md-icon {
+    font-size: 30px;
+    height: 64px;
+    width: 64px;
+    line-height: 64px;
+    color: white;
+  }
+}