Adds working sidebar. Has some funky height glitch that I can resolve later. Hard to get the viewport to be 100%

web/src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
     {
         path: '',
-        component: DashboardComponent
+        component: HomeComponent
     },
     {
         path:'about',

web/src/app/app.component.html

@@ -1,9 +1,21 @@
-<div >
-    <app-navbar></app-navbar>
+    <app-navbar class="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>
+        <md-sidenav #sidenav mode="side" class="sidebar" opened="true">
+            <md-nav-list>
+                    <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="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>
+    </md-sidenav>
+
+        <router-outlet class="main"></router-outlet>
+    </md-sidenav-container>

web/src/app/app.component.scss

@@ -1,14 +1,32 @@
 .container {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    height:100vh;
 }
 
+
 .main {
-    padding: 20px 70px 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width:80%;
 }
 
-.sidebar {
-    padding:20px;
+.sidebar{
     width:20%;
+}
+
+.dashboard-highlight {
+    color: green !important;
+}
+
+.trading-highlight {
+    color: red !important;
+}
+
+.wallet-highlight {
+    color: blueviolet !important;
+}
+
+.settings-highlight {
+    color: magenta !important;
 }

web/src/app/pages/home/home.component.html

@@ -1,2 +1 @@
-<div class="container">
-</div>
+<h1>Howdy!</h1>

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

@@ -1,6 +1,6 @@
 .sidebar {
-    width:18%;
-    background: none;
+    padding: 20px;
+    width:20%;
 }
 
 .dashboard-highlight {

web/src/styles.scss

@@ -4,7 +4,8 @@ html,
 body {
     margin: 0;
     padding: 0;
-    height: 100%;
+    overflow-y: hidden;
+    
 }