From 790130927e108cb3ce73d03fdad56d28a52835b9 Mon Sep 17 00:00:00 2001
From: gloriousCode <scott@gloriousedge.com>
Date: Fri, 6 Oct 2017 16:52:58 +1100
Subject: [PATCH] Adds a sidebar component

---
 web/src/app/app.component.html                | 14 +++---
 web/src/app/app.module.ts                     |  9 +++-
 .../pages/settings/settings.component.scss    |  4 +-
 .../services/sidebar/sidebar.service.spec.ts  | 15 +++++++
 .../app/services/sidebar/sidebar.service.ts   | 45 +++++++++++++++++++
 .../app/shared/navbar/navbar.component.html   | 21 ++++-----
 .../app/shared/sidebar/sidebar.component.html |  8 ++++
 .../app/shared/sidebar/sidebar.component.scss |  0
 .../shared/sidebar/sidebar.component.spec.ts  | 25 +++++++++++
 .../app/shared/sidebar/sidebar.component.ts   | 18 ++++++++
 10 files changed, 136 insertions(+), 23 deletions(-)
 create mode 100644 web/src/app/services/sidebar/sidebar.service.spec.ts
 create mode 100644 web/src/app/services/sidebar/sidebar.service.ts
 create mode 100644 web/src/app/shared/sidebar/sidebar.component.html
 create mode 100644 web/src/app/shared/sidebar/sidebar.component.scss
 create mode 100644 web/src/app/shared/sidebar/sidebar.component.spec.ts
 create mode 100644 web/src/app/shared/sidebar/sidebar.component.ts

diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 7954b234..72199f7a 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -1,9 +1,11 @@
-<app-navbar></app-navbar>
+<md-sidenav-container class="example-sidenav-fab-container">
+    <app-navbar></app-navbar>
 
-<div class="sidebar"></div>
+    <app-sidebar></app-sidebar>
 
-<div class="main">
-    <div class="main-content">
-        <router-outlet></router-outlet>
+    <div class="main">
+        <div class="main-content">
+            <router-outlet></router-outlet>
+        </div>
     </div>
-</div>
\ No newline at end of file
+</md-sidenav-container>
\ No newline at end of file
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index 64ec6c2f..8428accc 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -19,6 +19,7 @@ import {
   MdCheckboxModule,
   MdGridListModule,
   MdProgressSpinnerModule,
+  MdSidenavModule,
 } from '@angular/material';
 
 
@@ -29,11 +30,13 @@ import { SettingsComponent } from './pages/settings/settings.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 
 import { NavbarComponent } from './shared/navbar/navbar.component';
+import { SidebarComponent } from './shared/sidebar/sidebar.component';
 import { ExchangeCurrencyTickerComponent } from './shared/exchange-currency-ticker/exchange-currency-ticker.component';
 import { AllEnabledCurrencyTickersComponent } from './shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component';
 //services
 import { WebsocketService } from './services/websocket/websocket.service';
 import { WebsocketHandlerService } from './services/websocket-handler/websocket-handler.service';
+import { SidebarService } from './services/sidebar/sidebar.service';
 import { ElectronService } from './providers/electron.service';
 //Routing
 import { AppRoutingModule } from './app-routing.module';
@@ -50,7 +53,8 @@ import * as Rx from 'rxjs/Rx';
     SettingsComponent,
     DashboardComponent,
     ExchangeCurrencyTickerComponent,
-    AllEnabledCurrencyTickersComponent
+    AllEnabledCurrencyTickersComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
@@ -68,8 +72,9 @@ import * as Rx from 'rxjs/Rx';
     MdCheckboxModule,
     MdGridListModule,
     MdProgressSpinnerModule,
+    MdSidenavModule,
   ],
-  providers: [ElectronService,WebsocketService,WebsocketHandlerService],
+  providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService],
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/web/src/app/pages/settings/settings.component.scss b/web/src/app/pages/settings/settings.component.scss
index 7a3c9dd6..98c47c43 100644
--- a/web/src/app/pages/settings/settings.component.scss
+++ b/web/src/app/pages/settings/settings.component.scss
@@ -15,6 +15,6 @@
 .md-fab {
     margin: 0;
     position: fixed;
-    bottom: 5%;
-    right: 2%;
+    right: 20px;
+    bottom: 10px;
 }
\ No newline at end of file
diff --git a/web/src/app/services/sidebar/sidebar.service.spec.ts b/web/src/app/services/sidebar/sidebar.service.spec.ts
new file mode 100644
index 00000000..7f6df76c
--- /dev/null
+++ b/web/src/app/services/sidebar/sidebar.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SidebarService } from './sidebar.service';
+
+describe('SidebarService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SidebarService]
+    });
+  });
+
+  it('should be created', inject([SidebarService], (service: SidebarService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/web/src/app/services/sidebar/sidebar.service.ts b/web/src/app/services/sidebar/sidebar.service.ts
new file mode 100644
index 00000000..cd18c6e2
--- /dev/null
+++ b/web/src/app/services/sidebar/sidebar.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { MdSidenav, MdDrawerToggleResult } from '@angular/material';
+
+@Injectable()
+export class SidebarService {
+  private sidenav: MdSidenav;
+
+  /**
+   * Setter for sidenav.
+   *
+   * @param {MdSidenav} sidenav
+   */
+  public setSidenav(sidenav: MdSidenav) {
+    this.sidenav = sidenav;
+  }
+
+  /**
+   * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't).
+   *
+   * @returns Promise<MdSidenavToggleResult>
+   */
+  public open(): Promise<MdDrawerToggleResult> {
+    return this.sidenav.open();
+  }
+
+  /**
+   * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't).
+   *
+   * @returns Promise<MdSidenavToggleResult>
+   */
+  public close(): Promise<MdDrawerToggleResult> {
+    return this.sidenav.close();
+  }
+
+  /**
+   * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed.
+   *
+   * @param {boolean} isOpen  Whether the sidenav should be open.
+   *
+   * @returns {Promise<MdSidenavToggleResult>}
+   */
+  public toggle(isOpen?: boolean): Promise<MdDrawerToggleResult> {
+    return this.sidenav.toggle(isOpen);
+  }
+}
\ No newline at end of file
diff --git a/web/src/app/shared/navbar/navbar.component.html b/web/src/app/shared/navbar/navbar.component.html
index c9a9d1f4..aba2e051 100644
--- a/web/src/app/shared/navbar/navbar.component.html
+++ b/web/src/app/shared/navbar/navbar.component.html
@@ -1,16 +1,11 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
 <nav class="docs-navbar">
-  <md-toolbar color="primary">
-  <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
-    <span>Logo</span>
-  </a>
-  <a md-button class="docs-button" routerLink="dashboard">Dashboard</a>
-  <a md-button class="docs-button" routerLink="about">Wallet Summary</a>
-  <a md-button class="docs-button" routerLink="settings">Settings</a>
-  <a md-button class="docs-button" routerLink="about">Help</a>
-  <div class="flex-spacer"></div>
-  <a md-button class="docs-button" href="https://github.com/thrasher-/gocryptotrader/issues" aria-label="GitHub Repository">
-    Report issue
-  </a>
-  </md-toolbar>
+    <md-toolbar color="primary">
+        <a (click)="sidenav.toggle()" class="material-icons">&#xE5D2;</a>
+        <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
+            <span>GoCryptoTrader</span>
+        </a>
+        <div class="flex-spacer"></div>
+        <a md-button class="docs-button">Pagename</a>
+    </md-toolbar>
 </nav>
\ No newline at end of file
diff --git a/web/src/app/shared/sidebar/sidebar.component.html b/web/src/app/shared/sidebar/sidebar.component.html
new file mode 100644
index 00000000..4b635ac8
--- /dev/null
+++ b/web/src/app/shared/sidebar/sidebar.component.html
@@ -0,0 +1,8 @@
+<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>
\ No newline at end of file
diff --git a/web/src/app/shared/sidebar/sidebar.component.scss b/web/src/app/shared/sidebar/sidebar.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/app/shared/sidebar/sidebar.component.spec.ts b/web/src/app/shared/sidebar/sidebar.component.spec.ts
new file mode 100644
index 00000000..e49c1a50
--- /dev/null
+++ b/web/src/app/shared/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/shared/sidebar/sidebar.component.ts b/web/src/app/shared/sidebar/sidebar.component.ts
new file mode 100644
index 00000000..93814c28
--- /dev/null
+++ b/web/src/app/shared/sidebar/sidebar.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MdSidenav } from '@angular/material';
+import { SidebarService } from './../../services/sidebar/sidebar.service';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+  @ViewChild('sidenav') public sidenav: MdSidenav;
+  sidebarService: SidebarService
+  constructor() { }
+
+  ngOnInit() {
+    this.sidebarService.setSidenav(this.sidenav);
+    }
+  }