Add @angular/material version to the navbar.

Author: josephperrott

package.json

@@ -19,13 +19,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^4.4.3",
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "2.0.0-beta.11",
     "@angular/common": "^4.4.3",
     "@angular/compiler": "^4.4.3",
     "@angular/core": "^4.4.3",
     "@angular/forms": "^4.4.3",
     "@angular/http": "^4.4.3",
-    "@angular/material": "2.0.0-beta.12",
+    "@angular/material": "2.0.0-beta.11",
     "@angular/platform-browser": "^4.4.3",
     "@angular/platform-browser-dynamic": "^4.4.3",
     "@angular/router": "^4.4.3",

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

@@ -1,6 +1,5 @@
-import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
-import {Router} from '@angular/router';
-import {Observable} from 'rxjs/Observable'
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Observable} from 'rxjs/Observable';
 import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 

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

@@ -2,7 +2,7 @@ import {Component, NgModule, OnInit} from '@angular/core';
 import {MatCardModule} from '@angular/material';
 import {CommonModule} from '@angular/common';
 import {ActivatedRoute, Params, RouterModule} from '@angular/router';
-import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {Observable} from 'rxjs/Observable';

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

@@ -29,7 +29,7 @@ describe('ComponentSidenav', () => {
       expect(component.sidenav instanceof MatSidenav).toBeTruthy();
       expect(component.isScreenSmall()).toBeTruthy();
       expect(component.sidenav.opened).toBe(false);
-    })
+    });
   });
 
   it('should show a link for each item in doc items categories', () => {

src/app/shared/navbar/navbar.html

@@ -4,7 +4,10 @@
     <img class="docs-angular-logo"
          src="../../../assets/img/homepage/angular-white-transparent.svg"
          alt="angular">
-    <span>Material</span>
+    <span class="title">
+      <div class="label">Material</div>
+      <div class="version">{{version.full}}</div>
+    </span>
   </a>
   <a mat-button class="docs-navbar-hide-small docs-button"
      *ngFor="let key of sectionKeys"

src/app/shared/navbar/navbar.scss

@@ -11,9 +11,22 @@
   }
 }
 
-.flex-spacer {
-  flex-grow: 1;
+.title {
+  display: inline-block;
+  line-height: 1;
+  
+  .label {
+    margin-top: 8px;
+  }
+  
+  .version {
+    font-size: 9px;
+  }
 }
+  
+  .flex-spacer {
+    flex-grow: 1;
+  }
 
 .docs-angular-logo {
   height: 26px;

src/app/shared/navbar/navbar.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatButtonModule, MatMenuModule} from '@angular/material';
 import {CommonModule} from '@angular/common';
+import {MatButtonModule, MatMenuModule, VERSION} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';
@@ -20,6 +20,10 @@ export class NavBar {
   get sectionKeys() {
     return SECTIONS_KEYS;
   }
+
+  get version() {
+    return VERSION;
+  }
 }
 
 @NgModule({

src/app/shared/navigation-focus/navigation-focus.ts

@@ -1,5 +1,4 @@
-import {NgModule, Injectable, OnInit, Directive, Input, ElementRef, Renderer2} from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {NgModule, OnInit, Directive, ElementRef} from '@angular/core';
 
 /** The timeout id of the previous focus change. */
 let lastTimeoutId = -1;