[frontend] Finish navigation bar

kibicara-frontend/src/app/shared/toolbar/toolbar.component.html

@@ -1,25 +1,22 @@
 <mat-toolbar color="primary">
-  <button
-    mat-icon-button
-    class="example-icon"
-    aria-label="Example icon-button with menu icon"
+  <a mat-button [routerLink]="['/']" routerLinkActive="router-link-active"
+    >Kibicara</a
+  >
+  <a mat-button [routerLink]="['/hoods']" routerLinkActive="router-link-active"
+    >All hoods</a
+  >
+  <a
+    mat-button
+    [routerLink]="['/organizers']"
+    routerLinkActive="router-link-active"
+    >Become a hood admin!</a
   >
-    <mat-icon>menu</mat-icon>
-  </button>
-  <span>Kibicara</span>
   <span class="example-spacer"></span>
-  <button
-    mat-icon-button
-    class="example-icon favorite-icon"
-    aria-label="Example icon-button with heart icon"
-  >
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <button
-    mat-icon-button
-    class="example-icon"
-    aria-label="Example icon-button with share icon"
-  >
-    <mat-icon>share</mat-icon>
-  </button>
+  <div *ngIf="authenticated; else unauthenticated">
+    <a mat-raised-button [routerLink]="['/dashboard']" routerLinkActive="router-link-active">Dashboard</a>
+    <a mat-button (click)="onLogout()" routerLinkActive="router-link-active">Logout</a>
+  </div>
+  <ng-template #unauthenticated>
+    <a mat-button [routerLink]="['/login']" routerLinkActive="router-link-active">Login</a>
+  </ng-template>
 </mat-toolbar>

kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss

@@ -1,3 +1,3 @@
 .example-spacer {
-  flex: 1 1 auto;
+  flex: 1 auto;
 }

kibicara-frontend/src/app/shared/toolbar/toolbar.component.ts

@@ -1,15 +1,39 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginService } from 'src/app/core/auth/login.service';
+import { Observer } from 'rxjs';
+import { Route } from '@angular/compiler/src/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { first, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html',
-  styleUrls: ['./toolbar.component.scss']
+  styleUrls: ['./toolbar.component.scss'],
 })
 export class ToolbarComponent implements OnInit {
+  authenticated = false;
 
-  constructor() { }
+  constructor(private loginService: LoginService, private router: Router) {
+    this.router.routeReuseStrategy.shouldReuseRoute = function () {
+      return false;
+    };
 
-  ngOnInit(): void {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.router.navigated = false;
+        if (this.loginService.currentHoodAdminValue) {
+          this.authenticated = true;
+        } else {
+          this.authenticated = false;
+        }
+      }
+    });
   }
 
+  ngOnInit(): void {}
+
+  onLogout() {
+    this.loginService.logout();
+    this.router.navigate(['/']);
+  }
 }