From 4438d166e4fcbde03e7502744600b3381f8d06a7 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Mon, 14 Sep 2020 11:20:28 +0200
Subject: [PATCH] Add sidenav

---
 src/app/app.component.html                    | 44 ++++++++++++++++++-
 src/app/app.component.scss                    | 14 ++++++
 src/app/app.component.ts                      | 11 ++++-
 src/app/app.module.ts                         |  8 ++--
 .../components/navbar/navbar.component.html   | 11 -----
 .../components/navbar/navbar.component.scss   |  5 ---
 .../navbar/navbar.component.spec.ts           | 25 -----------
 src/app/components/navbar/navbar.component.ts | 21 ---------
 8 files changed, 71 insertions(+), 68 deletions(-)
 delete mode 100644 src/app/components/navbar/navbar.component.html
 delete mode 100644 src/app/components/navbar/navbar.component.scss
 delete mode 100644 src/app/components/navbar/navbar.component.spec.ts
 delete mode 100644 src/app/components/navbar/navbar.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6659729..642c284 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,42 @@
-<app-navbar></app-navbar>
-<router-outlet></router-outlet>
+<div id="page-wrapper">
+  <mat-toolbar id="navbar">
+    <button mat-icon-button (click)="sidenav.toggle()">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <span>Flotte</span>
+    <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-trigger-button">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <div
+        mat-menu-item
+        disableRipple="true"
+        (click)="$event.stopPropagation()"
+      >
+        <mat-slide-toggle
+          (change)="changeTheme($event)"
+          [checked]="darkThemeIsActive"
+          >Dark Mode</mat-slide-toggle
+        >
+      </div>
+    </mat-menu>
+  </mat-toolbar>
+
+  <mat-sidenav-container id="content">
+    <mat-sidenav #sidenav>
+      <mat-nav-list>
+        <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
+        <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
+        <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
+        <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
+        <a mat-list-item [routerLink]="'/activities'"> Activities </a>
+        <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <div>
+        <router-outlet></router-outlet>
+      </div>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..2a2713c 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,14 @@
+#page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  #content {
+    flex: 1;
+  }
+  #navbar {
+    flex: none;
+    #menu-trigger-button {
+      margin-left: auto;
+    }
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b7fe61f..7131c97 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,9 +8,18 @@ import { ColorThemeService } from './services/colorTheme.service';
 })
 export class AppComponent {
   title = 'flotte-frontend';
+  darkThemeIsActive: boolean = false;
 
-  constructor(private renderer: Renderer2, private themeService: ColorThemeService) {
+  constructor(
+    private renderer: Renderer2,
+    private themeService: ColorThemeService
+  ) {
     this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
     this.themeService.load();
+    this.darkThemeIsActive = this.themeService.currentActive() === 'dark-theme';
+  }
+
+  changeTheme(event) {
+    this.themeService.update(event.checked ? 'dark-theme' : 'light-theme');
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 462b413..546efd0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,13 +9,14 @@ import {MatInputModule} from '@angular/material/input';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatIconModule} from '@angular/material/icon';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatListModule} from '@angular/material/list';
 
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginComponent } from './pages/login/login.component';
-import { NavbarComponent } from './components/navbar/navbar.component';
 import { BikesComponent } from './pages/bikes/bikes.component';
 
 
@@ -24,7 +25,6 @@ import { BikesComponent } from './pages/bikes/bikes.component';
   declarations: [
     AppComponent,
     LoginComponent,
-    NavbarComponent,
     BikesComponent
   ],
   imports: [
@@ -37,7 +37,9 @@ import { BikesComponent } from './pages/bikes/bikes.component';
     MatInputModule,
     MatMenuModule,
     MatSlideToggleModule,
-    MatIconModule
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
deleted file mode 100644
index de67fa6..0000000
--- a/src/app/components/navbar/navbar.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<mat-toolbar id="navbar">
-  <span>Flotte</span>
-  <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-trigger-button">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <div mat-menu-item disableRipple="true" (click) = "$event.stopPropagation()">
-      <mat-slide-toggle (change)="changeTheme($event)" [checked]="darkThemeIsActive">Dark Mode</mat-slide-toggle>
-    </div>
-  </mat-menu>
-</mat-toolbar>
diff --git a/src/app/components/navbar/navbar.component.scss b/src/app/components/navbar/navbar.component.scss
deleted file mode 100644
index 0c8fa30..0000000
--- a/src/app/components/navbar/navbar.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-#navbar {
-    #menu-trigger-button {
-        margin-left: auto
-    }
-}
diff --git a/src/app/components/navbar/navbar.component.spec.ts b/src/app/components/navbar/navbar.component.spec.ts
deleted file mode 100644
index 9032ad2..0000000
--- a/src/app/components/navbar/navbar.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavbarComponent } from './navbar.component';
-
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NavbarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
deleted file mode 100644
index 1c568d1..0000000
--- a/src/app/components/navbar/navbar.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ColorThemeService } from '../../services/colorTheme.service';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
-})
-export class NavbarComponent implements OnInit {
-  darkThemeIsActive: boolean = false;
-  constructor(private themeService: ColorThemeService) {
-    this.darkThemeIsActive = this.themeService.currentActive() === "dark-theme";
-  }
-  
-
-  ngOnInit(): void {}
-
-  changeTheme(event) {
-    this.themeService.update((event.checked) ? "dark-theme" : "light-theme");
-  }
-}