Add sidenav

src/app/app.component.html

@@ -1,2 +1,42 @@
-<app-navbar></app-navbar>
+<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>

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;
+    }
+  }
+}

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');
   }
 }

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]

src/app/components/navbar/navbar.component.html

@@ -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>

src/app/components/navbar/navbar.component.scss

@@ -1,5 +0,0 @@
-#navbar {
-    #menu-trigger-button {
-        margin-left: auto
-    }
-}

src/app/components/navbar/navbar.component.spec.ts

@@ -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();
-  });
-});

src/app/components/navbar/navbar.component.ts

@@ -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");
-  }
-}