SharedModule, ToolbarModule

.angular-cli.json

@@ -9,6 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
+        "manifest.json",
         "favicon.ico"
       ],
       "index": "index.html",
@@ -18,8 +19,9 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
+      "serviceWorker": true,
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }

ngsw-manifest.json

@@ -0,0 +1,10 @@
+{
+  "external": {
+    "urls": [
+      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto"},
+      {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+    ]
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -33,10 +34,13 @@
     "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular2-template-loader": "^0.6.2",
     "codelyzer": "~3.1.1",
+    "electron": "^1.6.11",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -48,6 +52,7 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "~2.3.3",
+    "wallaby-webpack": "*"
   }
 }

src/app/app.component.html

@@ -1,37 +1,24 @@
-<md-sidenav-container fullscreen>
-  <md-toolbar color="accent">
-    <button md-button (click)="sidenav.toggle()">
-      <md-icon>
-        menu
-      </md-icon>
-    </button>
-    RxJS Docs
+<div class="app-fullpage">
+  <md-toolbar color="accent" class="mat-elevation-z6">
+    <button md-icon-button (click)="sidenav.toggle()">
+    <md-icon>
+      menu
+    </md-icon>
+  </button>
+    <span class="title"> RxJS Docs </span>
   </md-toolbar>
-  <md-sidenav #sidenav>
-    <md-toolbar>
-      <span>
-        <button md-button routerLink="/rxjs">
-          Home
-        </button>
-      </span>
-      <md-toolbar-row>
-        <button md-button routerLink="/operators">
-          Operators
-        </button>
-      </md-toolbar-row>
-      <md-toolbar-row>
-        <button md-button routerLink="/companies">
-          Companies
-        </button>
-      </md-toolbar-row>
-      <md-toolbar-row>
-        <button md-button routerLink="/team">
-          Team
-        </button>
-      </md-toolbar-row>
-    </md-toolbar>
-  </md-sidenav>
-  <div class="body-margin">
-    <router-outlet></router-outlet> 
-  </div>
-</md-sidenav-container>
+  <md-sidenav-container>
+    <md-sidenav #sidenav>
+      <md-nav-list (click)="sidenav.toggle()">
+        <a *ngFor="let menu of menus" md-list-item routerLinkActive="active"
+          [routerLinkActiveOptions]="menu.options"
+          [routerLink]="menu.link">
+         {{menu.title}} 
+        </a>
+      </md-nav-list>
+    </md-sidenav>
+    <div class="body-margin">
+      <router-outlet></router-outlet>
+    </div>
+  </md-sidenav-container>
+</div>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.title {
+  padding: 0 16px;
+}

src/app/app.component.ts

@@ -1,10 +1,37 @@
 import { Component } from '@angular/core';
 
+interface Menu {
+  title: string;
+  link: string;
+  options: { exact: boolean };
+}
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app';
+  menus: Menu[] = [
+    { 
+      title: 'Home',
+      link: '/',
+      options: { exact: true }
+    },
+    { 
+      title: 'Operators',
+      link: '/operators',
+      options: { exact: false }
+    },
+    { 
+      title: 'Companies',
+      link: '/companies',
+      options: { exact: false }
+    },
+    { 
+      title: 'Team',
+      link: '/team',
+      options: { exact: false }
+    }
+  ]
 }

src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule } from '@angular/material';
-import { routing } from './app.routing';
+import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule } from '@angular/material';
+import { RouterModule } from '@angular/router';
+
+import { RXJS_DOC_ROUTES } from './app.routing';
 
 import { AppComponent } from './app.component';
 import { OperatorsComponent } from './operators/operators.component';
@@ -21,11 +23,12 @@ import { RxjsComponent } from './rxjs/rxjs.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    routing,
+    RouterModule.forRoot(RXJS_DOC_ROUTES),
     MdToolbarModule,
     MdSidenavModule,
     MdIconModule,
-    MdButtonModule
+    MdButtonModule,
+    MdListModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -1,17 +1,15 @@
 import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { CompaniesComponent } from './companies/companies.component';
 import { OperatorsComponent } from './operators/operators.component';
 import { RxjsComponent } from './rxjs/rxjs.component';
 import { TeamComponent } from './team/team.component';
 
-const appRoutes: Routes = [
+export const RXJS_DOC_ROUTES: Routes = [
   { path: '', component: RxjsComponent },
-  { path: 'rxjs', component: RxjsComponent},
   { path: 'operators', component: OperatorsComponent },
   { path: 'team', component: TeamComponent },
-  { path: 'companies', component: CompaniesComponent }
+  { path: 'companies', component: CompaniesComponent },
+  { path: '**', redirectTo: '' }
 ];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

src/app/companies/companies.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
-  styleUrls: ['./companies.component.css']
+  styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent implements OnInit {
 

src/app/operators/operators.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-operators',
   templateUrl: './operators.component.html',
-  styleUrls: ['./operators.component.css']
+  styleUrls: ['./operators.component.scss']
 })
 export class OperatorsComponent implements OnInit {
 

src/app/rxjs/rxjs.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
-  styleUrls: ['./rxjs.component.css']
+  styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
 

src/app/team/team.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
-  styleUrls: ['./team.component.css']
+  styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
 

src/index.html

@@ -2,13 +2,19 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="theme-color" content="#333">
   <title>RxjsDocs</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.json">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
 </body>
 </html>

src/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "RxJS Docs",
+  "display": "standalone",
+  "start_url": "/",
+  "short_name": "RxJS Docs",
+  "theme_color": "#333",
+  "description": "Documentation for RxJS 5+",
+  "orientation": "any",
+  "background_color": "#fafafa",
+  "icons": [
+    {
+      "src": "/assets/img/Rx_Logo-512-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-192-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-144-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-128-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-96-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-72-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-48-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-16-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ]
+}