Adds a sidebar with navigation aww yeah

web/src/app/app.component.html

@@ -1,11 +1,9 @@
-<md-sidenav-container class="example-sidenav-fab-container">
-    <app-navbar></app-navbar>
-
-    <app-sidebar></app-sidebar>
-
-    <div class="main">
-        <div class="main-content">
-            <router-outlet></router-outlet>
-        </div>
+<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>

web/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {
   MdGridListModule,
   MdProgressSpinnerModule,
   MdSidenavModule,
+  MdListModule,
 } from '@angular/material';
 
 
@@ -73,6 +74,7 @@ import * as Rx from 'rxjs/Rx';
     MdGridListModule,
     MdProgressSpinnerModule,
     MdSidenavModule,
+    MdListModule,
   ],
   providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService],
   bootstrap: [AppComponent]

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

@@ -1,7 +1,7 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
 <nav class="docs-navbar">
     <md-toolbar color="primary">
-        <a (click)="sidenav.toggle()" class="material-icons">&#xE5D2;</a>
+        <a (click)="sidebarService.toggle()" class="material-icons">&#xE5D2;</a>
         <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
             <span>GoCryptoTrader</span>
         </a>

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

@@ -0,0 +1,3 @@
+.material-icons {
+    cursor: pointer;
+}

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SidebarService } from './../../services/sidebar/sidebar.service';
 
 @Component({
   selector: 'app-navbar',
@@ -6,8 +7,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent implements OnInit {
-
-  constructor() { }
+  sidebarService: SidebarService
+  constructor(something: SidebarService) {
+    this.sidebarService = something;
+   }
 
   ngOnInit() {
   }

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

@@ -1,8 +1,10 @@
-<md-sidenav #sidenav mode="side" opened="true">
-    <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
-        <md-icon>add</md-icon>
-      </button>
-    <div class="example-scrolling-content">
-        The
-    </div>
+<md-sidenav #sidenav mode="side" class="sidebar" opened="true">
+        <md-nav-list>
+                <md-list-item routerLink="dashboard">
+                        <md-icon >trending_up</md-icon>&nbsp;<h3>Dashboard</h3>
+                </md-list-item>
+                <md-list-item routerLink="settings">
+                        <md-icon >settings</md-icon>&nbsp;<h3>Settings</h3>
+                </md-list-item>
+              </md-nav-list>
 </md-sidenav>

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

@@ -0,0 +1,4 @@
+.sidebar {
+    width:18%;
+    background: none;
+}

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

@@ -10,7 +10,9 @@ import { SidebarService } from './../../services/sidebar/sidebar.service';
 export class SidebarComponent implements OnInit {
   @ViewChild('sidenav') public sidenav: MdSidenav;
   sidebarService: SidebarService
-  constructor() { }
+  constructor(something: SidebarService) {
+    this.sidebarService = something;
+   }
 
   ngOnInit() {
     this.sidebarService.setSidenav(this.sidenav);

web/src/styles.scss

@@ -23,11 +23,11 @@ body {
 .loading-spinner {
     margin-left:50%;
     margin-right:50%;
-    width:100%;
 }
 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
+
 /*
 deeppurple-amber.css
 indigo-pink.css