Add @angular/material version to the navbar.

Author: josephperrott

package.json

@@ -19,27 +19,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/cdk": "^5.0.0-rc.3",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/material": "^5.0.0-rc.3",
-    "@angular/material-moment-adapter": "^5.0.0-rc.3",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
-    "@angular/service-worker": "^1.0.0-beta.16",
+    "@angular/animations": "^5.1.0",
+    "@angular/cdk": "^5.0.0",
+    "@angular/common": "^5.1.0",
+    "@angular/compiler": "^5.1.0",
+    "@angular/core": "^5.1.0",
+    "@angular/forms": "^5.1.0",
+    "@angular/http": "^5.1.0",
+    "@angular/material": "^5.0.0",
+    "@angular/material-moment-adapter": "^5.0.0",
+    "@angular/platform-browser": "^5.1.0",
+    "@angular/platform-browser-dynamic": "^5.1.0",
+    "@angular/router": "^5.1.0",
+    "@angular/service-worker": "^5.1.0",
     "core-js": "^2.4.1",
     "moment": "^2.19.1",
     "rxjs": "^5.5.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "^1.5.0",
-    "@angular/compiler-cli": "^5.0.0",
+    "@angular/cli": "^1.6.0",
+    "@angular/compiler-cli": "^5.1.0",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
     "firebase-tools": "^3.15.3",

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/footer/footer.html

@@ -1,19 +1,22 @@
 <footer class="docs-footer">
   <div class="docs-footer-list">
-    <div class="footer-logo">
-      <img class="docs-footer-angular-logo"
-        src="../../../assets/img/homepage/angular-white-transparent.svg"
-        alt="angular">
+    <div class="docs-footer-logo">
+      <div class="footer-logo">
+        <img class="docs-footer-angular-logo"
+          src="../../../assets/img/homepage/angular-white-transparent.svg"
+          alt="angular">
+        <span><a href="https://angular.io">Learn Angular</a></span>
+      </div>
     </div>
 
-    <div class="docs-footer-links">
-      <ul>
-        <li> <a href="https://angular.io">Learn Angular</a> </li>
-      </ul>
+    <div class="docs-footer-version">
+      <span class="version">Current Version: {{version.full}}</span>
     </div>
 
     <div class="docs-footer-copyright">
-      <p>Powered by Google ©2010-2017. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.</p>
+      <span>Powered by Google ©2010-2017.</span>
+      <span>Code licensed under an MIT-style License.</span>
+      <span>Documentation licensed under CC BY 4.0.</span>
     </div>
   </div>
 </footer>

src/app/shared/footer/footer.scss

@@ -11,25 +11,39 @@
   padding: 8px;
 }
 
+.docs-footer-logo {
+  flex: 1;
+}
+
 .docs-footer-angular-logo {
   height: 50px;
 }
 
+.docs-footer-version {
+  flex: 1;
+  text-align: center;
+}
+
 .docs-footer-copyright {
   display: flex;
   flex: 1;
   justify-content: flex-end;
+  flex-direction: column;
+  min-width: 225px;
+  text-align: center;
 }
 
-.docs-footer-links ul {
-  list-style: none;
+.docs-footer-logo span {
+  display: inline-block;
+  line-height: 50px;
   margin: 0 40px;
-  padding: 0;
+  vertical-align: bottom;
 
   a {
     font-size: 16px;
     padding: 0;
     text-decoration: none;
+    color: inherit;
 
     &:hover {
       text-decoration: underline;

src/app/shared/footer/footer.ts

@@ -1,11 +1,16 @@
 import {Component, NgModule} from '@angular/core';
+import {VERSION} from '@angular/material';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.html',
   styleUrls: ['./footer.scss']
 })
-export class Footer { }
+export class Footer {
+  get version() {
+    return VERSION;
+  }
+}
 
 
 @NgModule({

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} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';

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;