Sidenav design

Author: feloy

src/app/app.component.html

@@ -1,37 +1,24 @@
-<md-sidenav-container fullscreen>
+<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>
+    <md-icon>
+      menu
+    </md-icon>
+  </button>
     <span class="title"> RxJS Docs </span>
   </md-toolbar>
-  <md-sidenav #sidenav>
-    <md-toolbar>
-      <span>
-        <button md-button routerLink="/">
-          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.ts

@@ -1,10 +1,37 @@
 import { Component } from '@angular/core';
 
+class Menu {
+  title: string;
+  link: string;
+  options: { exact: boolean }; 
+}
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   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,7 +1,7 @@
 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 { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
 import { RXJS_DOC_ROUTES } from './app.routing';
@@ -27,7 +27,8 @@ import { RxjsComponent } from './rxjs/rxjs.component';
     MdToolbarModule,
     MdSidenavModule,
     MdIconModule,
-    MdButtonModule
+    MdButtonModule,
+    MdListModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.scss

@@ -1,10 +1,46 @@
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import "~@angular/material/theming";
+@include mat-core();
+
+// Define the theme.
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink);
+$theme: mat-light-theme($primary, $accent);
+@include angular-material-theme($theme);
 
 body {
-  font-family: Roboto;
-  margin: 0px;
- }
+  font-family: Roboto, sans-serif;
+}
+
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.app-fullpage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+md-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+md-sidenav { 
+  width: 200px;
+}
+
+md-sidenav a.active .mat-list-item-content {
+  color: mat-color($accent);
+}
 
- .body-margin {
-   margin: 50px;
- }
+.body-margin {
+  margin: 50px;
+}