A breaking change to check out having a sidebar with content that slides over when the menu is closed.

web/src/app/app.component.html

@@ -1,9 +1,9 @@
-<app-navbar></app-navbar>
-<md-sidenav-container >
-<app-sidebar ></app-sidebar>
-<div class="main">
-    <div class="main-content">    
-        <router-outlet></router-outlet>
-    </div>
-</div>
-</md-sidenav-container>
+<div >
+    <app-navbar></app-navbar>
+    <md-sidenav-container class="container">
+        <app-sidebar class="sidebar"></app-sidebar>
+        <div class="main">
+            <router-outlet></router-outlet>
+        </div>
+    </md-sidenav-container>
+</div>

web/src/app/app.component.scss

@@ -0,0 +1,14 @@
+.container {
+}
+
+.main {
+    padding: 20px 70px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sidebar {
+    padding:20px;
+    width:20%;
+}

web/src/app/shared/sidebar/sidebar.component.html

@@ -1,9 +1,15 @@
 <md-sidenav #sidenav mode="side" class="sidebar" opened="true">
         <md-nav-list>
-                <md-list-item routerLink="dashboard">
+                <md-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
                         <md-icon >trending_up</md-icon>&nbsp;<h3>Dashboard</h3>
                 </md-list-item>
-                <md-list-item routerLink="settings">
+                <md-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
+                        <md-icon >account_balance_wallet</md-icon>&nbsp;<h3>Wallet</h3>
+                </md-list-item>
+                <md-list-item routerLink="trading" routerLinkActive="trading-highlight">
+                        <md-icon >history</md-icon>&nbsp;<h3>Trading</h3>
+                </md-list-item>
+                <md-list-item routerLink="settings" routerLinkActive="settings-highlight">
                         <md-icon >settings</md-icon>&nbsp;<h3>Settings</h3>
                 </md-list-item>
               </md-nav-list>

web/src/app/shared/sidebar/sidebar.component.scss

@@ -2,3 +2,19 @@
     width:18%;
     background: none;
 }
+
+.dashboard-highlight {
+    color: green !important;
+}
+
+.trading-highlight {
+    color: red !important;
+}
+
+.wallet-highlight {
+    color: blueviolet !important;
+}
+
+.settings-highlight {
+    color: magenta !important;
+}

web/src/app/shared/sidebar/sidebar.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { SidebarService } from './../../services/sidebar/sidebar.service';
+import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'app-sidebar',
@@ -10,8 +11,18 @@ import { SidebarService } from './../../services/sidebar/sidebar.service';
 export class SidebarComponent implements OnInit {
   @ViewChild('sidenav') public sidenav: MdSidenav;
   sidebarService: SidebarService
-  constructor(something: SidebarService) {
+public currentUrl:string;
+
+  constructor(something: SidebarService, private router:Router) {
     this.sidebarService = something;
+
+    router.events.subscribe(event => {
+      
+            if (event instanceof NavigationEnd ) {
+              console.log("current url",event.url); // event.url has current url
+              this.currentUrl = event.url;
+            }
+          });
    }
 
   ngOnInit() {

web/src/styles.scss

@@ -7,18 +7,7 @@ body {
     height: 100%;
 }
 
-.main {
-    padding: 20px 70px 0;
-    display: block;
-    text-align: center;
-}
 
-.main-content {
-    display: inline-block;
-    text-align: left;
-    max-width: 940px;
-    width:100%;
-}
 
 .loading-spinner {
     margin-left:50%;