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;
+  }
+}

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

@@ -0,0 +1,18 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import 'rxjs/add/operator/first';
+import {ComponentPageTitle} from '../page-title/page-title';
+
+@Component({
+  selector: 'component-page-header',
+  templateUrl: './component-page-header.html',
+  styleUrls: ['./component-page-header.scss']
+})
+export class ComponentPageHeader {
+  constructor(private _componentPageTitle: ComponentPageTitle) { }
+
+  @Output() toggleSidenav = new EventEmitter<void>();
+
+  getTitle() {
+    return this._componentPageTitle.title;
+  }
+}

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

@@ -6,12 +6,10 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
-  $sidenav: '.docs-component-viewer-sidenav'; 
+  $sidenav: '.docs-component-viewer-sidenav';
 
 
   .docs-component-viewer-sidenav {
-    background: rgba(md-color($foreground, secondary-text), .04);
-
 
     // Section divider
     h3 {
@@ -27,8 +25,8 @@
       > a {
       color: md-color($foreground, secondary-text);
 
-        &.is-selected, 
-        &:hover, 
+        &.is-selected,
+        &:hover,
         &:focus {
           background: md-color($background, background);
           color: md-color($primary);

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

@@ -1,5 +1,7 @@
 <md-sidenav-layout class="docs-component-viewer-sidenav-container">
-  <md-sidenav opened mode="side" class="docs-component-viewer-sidenav">
+  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+              [opened]="!isScreenSmall()"
+              [mode]="isScreenSmall() ? 'over' : 'side'">
     <nav *ngFor="let category of docItems.getItemsInCategories()">
       <h3>{{category.name}}</h3>
       <ul>
@@ -13,5 +15,6 @@ <h3>{{category.name}}</h3>
     </nav>
   </md-sidenav>
 
+  <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
   <router-outlet></router-outlet>
 </md-sidenav-layout>

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

@@ -1,6 +1,9 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, ViewChild} from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {MdSidenav} from '@angular/material';
+import {Router} from '@angular/router';
 
+const SMALL_WIDTH_BREAKPOINT = 840;
 
 @Component({
   selector: 'app-component-sidenav',
@@ -9,5 +12,20 @@ import {DocumentationItems} from '../../shared/documentation-items/documentation
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentSidenav {
-  constructor(public docItems: DocumentationItems) {}
+  constructor(public docItems: DocumentationItems,
+              private _router: Router) {}
+
+  @ViewChild(MdSidenav) sidenav: MdSidenav;
+
+  ngOnInit() {
+    this._router.events.subscribe(() => {
+      if (this.isScreenSmall()) {
+        this.sidenav.close();
+      }
+    });
+  }
+
+  isScreenSmall(): boolean {
+    return window.matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`).matches;
+  }
 }

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

@@ -1,7 +1,3 @@
-<div class="docs-primary-header">
-  <h1> Component - {{componentDocItem.name}} </h1>
-</div>
-
 <!-- TODO(jelbourn): turn this into nav tabs -->
 <md-tab-group class="docs-component-viewer-tabbed-content"
     (selectedIndexChange)="overviewViewer.releadLiveExamples()">

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

@@ -1,9 +1,14 @@
+@import '../../../styles/constants';
+
 app-component-viewer {
   font-weight: 400;
 }
 
 .docs-component-viewer-tabbed-content {
   margin: 50px 70px;
+  @media (max-width: $small-breakpoint-width) {
+    margin: 16px;
+  }
 
   md-tab {
     margin: 30px;

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

@@ -1,6 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 
 @Component({
@@ -12,9 +13,12 @@ import {DocumentationItems, DocItem} from '../../shared/documentation-items/docu
 export class ComponentViewer {
   componentDocItem: DocItem;
 
-  constructor(private _route: ActivatedRoute, public docItems: DocumentationItems) {
+  constructor(private _route: ActivatedRoute,
+              private _componentPageTitle: ComponentPageTitle,
+              public docItems: DocumentationItems) {
     _route.params.subscribe(p => {
       this.componentDocItem = docItems.getItemById(p['id']);
+      this._componentPageTitle.title = `Component - ${this.componentDocItem.name}`;
     });
   }
 }

src/app/pages/page-title/page-title.ts

@@ -0,0 +1,12 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Service responsible for setting the title that appears above the components and guide pages.
+ */
+@Injectable()
+export class ComponentPageTitle {
+  _title: string = '';
+
+  get title(): string { return this._title; }
+  set title(title: string) { this._title = title; }
+}

src/app/shared/example-viewer/_example-viewer-theme.scss

@@ -9,6 +9,7 @@
     .docs-example-viewer-wrapper {
       border: 1px solid rgba(md-color($foreground, secondary-text), .03);
       box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
+      margin: 4px;
     }
 
     .docs-example-viewer-title {

src/styles/_constants.scss

@@ -0,0 +1 @@
+$small-breakpoint-width: 840px;