From b75126779a98dc66444598677327f340e1353785 Mon Sep 17 00:00:00 2001
From: Aaron Louie <ajlouie@gmail.com>
Date: Tue, 22 Sep 2020 14:41:14 -0400
Subject: [PATCH] Adds top toolbar

---
 src/_config.scss                     | 2 +-
 src/app/app.component.html           | 3 +--
 src/app/app.module.ts                | 9 ++++++++-
 src/app/navbar/navbar.component.html | 7 ++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/_config.scss b/src/_config.scss
index cd462d8..3f82ca6 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -62,4 +62,4 @@ $brand-green-light: #B5D9A3;
 // Dimensions
 $easeDuration: 300ms;
 $animationDuration: 500ms;
-$header-height: 84px;
+$header-height: 64px;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index afd6ee9..f3e33c7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,10 +1,9 @@
 <div class="mat-typography">
-  <app-navbar (userChanged)="reload()"></app-navbar>
+  <app-navbar></app-navbar>
   <router-outlet *ngIf="!loading; else loadingMessage"></router-outlet>
   <app-footer></app-footer>
 </div>
 
-
 <ng-template #loadingMessage>
   <app-loading></app-loading>
 </ng-template>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7bfbc81..738cd75 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,8 +3,11 @@ import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatToolbarModule} from '@angular/material/toolbar';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FormlyModule} from '@ngx-formly/core';
 import {ThisEnvironment} from '../environments/environment.injectable';
@@ -47,7 +50,11 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     HttpClientModule,
     MatProgressSpinnerModule,
     ReactiveFormsModule,
-    AppRoutingModule // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
+    AppRoutingModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
   ],
   providers: [
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 6bbf8ee..8709f26 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1 +1,6 @@
-<p>navbar works!</p>
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <button mat-icon-button routerLink="/"><mat-icon>home</mat-icon></button>
+    <button mat-icon-button routerLink="/settings"><mat-icon>settings</mat-icon></button>
+  </mat-toolbar-row>
+</mat-toolbar>