From c19aa91ec8beb205c984fc9dc2d53dd3a2dc2fd9 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Tue, 1 Sep 2020 21:11:23 +0200
Subject: [PATCH] [frontend] Add mobile navbar

---
 .../app/shared/toolbar/toolbar.component.html | 50 +++++++++++++++++--
 .../app/shared/toolbar/toolbar.component.scss | 13 +++++
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
index f7437d3..04499f6 100644
--- a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
+++ b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
@@ -2,21 +2,63 @@
   <a mat-button [routerLink]="['/']" routerLinkActive="router-link-active"
     >Kibicara</a
   >
-  <a mat-button [routerLink]="['/hoods']" routerLinkActive="router-link-active"
+  <a
+    mat-button
+    [routerLink]="['/hoods']"
+    routerLinkActive="router-link-active"
+    class="hide-button"
     >All hoods</a
   >
+  <a
+    mat-icon-button
+    [routerLink]="['/hoods']"
+    routerLinkActive="router-link-active"
+    class="show-button"
+    ><mat-icon>search</mat-icon></a
+  >
   <a
     mat-button
     [routerLink]="['/organizers']"
     routerLinkActive="router-link-active"
+    class="hide-button"
     >Become a hood admin!</a
   >
+  <a
+    mat-icon-button
+    [routerLink]="['/organizers']"
+    routerLinkActive="router-link-active"
+    class="show-button"
+    ><mat-icon>add_box</mat-icon></a
+  >
   <span class="example-spacer"></span>
   <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>
+    <a
+      mat-raised-button
+      [routerLink]="['/dashboard']"
+      routerLinkActive="router-link-active"
+      >Dashboard</a
+    >
+    <a
+      mat-button
+      (click)="onLogout()"
+      routerLinkActive="router-link-active"
+      class="hide-button"
+      >Logout</a
+    >
+    <a
+      mat-button
+      (click)="onLogout()"
+      routerLinkActive="router-link-active"
+      class="show-button"
+      ><mat-icon>exit_to_app</mat-icon></a
+    >
   </div>
   <ng-template #unauthenticated>
-    <a mat-button [routerLink]="['/login']" routerLinkActive="router-link-active">Login</a>
+    <a
+      mat-button
+      [routerLink]="['/login']"
+      routerLinkActive="router-link-active"
+      >Login</a
+    >
   </ng-template>
 </mat-toolbar>
diff --git a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
index 02193a7..4cfbc21 100644
--- a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
+++ b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
@@ -1,3 +1,16 @@
 .example-spacer {
   flex: 1 auto;
 }
+
+.hide-button {
+  @media screen and (max-width: 600px) {
+    display: none;
+  }
+}
+
+.show-button {
+  display: none;
+  @media screen and (max-width: 600px) {
+    display: initial;
+  }
+}