From 0ecb137bc961b6b488fb240db225762198de929f Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 4 Sep 2020 13:14:43 +0200
Subject: [PATCH] [frontend] Make toolbar fixed and add shadow

---
 kibicara-frontend/src/app/app.component.html           |  4 +++-
 kibicara-frontend/src/app/app.component.scss           |  3 +++
 .../src/app/shared/toolbar/toolbar.component.html      |  2 +-
 .../src/app/shared/toolbar/toolbar.component.scss      | 10 ++++++++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/kibicara-frontend/src/app/app.component.html b/kibicara-frontend/src/app/app.component.html
index 21f8668..7e1ab48 100644
--- a/kibicara-frontend/src/app/app.component.html
+++ b/kibicara-frontend/src/app/app.component.html
@@ -1,2 +1,4 @@
 <app-toolbar></app-toolbar>
-<router-outlet></router-outlet>
+<div class="content">
+  <router-outlet></router-outlet>
+</div>
diff --git a/kibicara-frontend/src/app/app.component.scss b/kibicara-frontend/src/app/app.component.scss
index e69de29..4fc56ff 100644
--- a/kibicara-frontend/src/app/app.component.scss
+++ b/kibicara-frontend/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.content {
+  margin-top: 64px;
+}
diff --git a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
index 04499f6..cb4b4c2 100644
--- a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
+++ b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar color="primary">
+<mat-toolbar class="toolbar mat-elevation-z3" color="primary">
   <a mat-button [routerLink]="['/']" routerLinkActive="router-link-active"
     >Kibicara</a
   >
diff --git a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
index 4cfbc21..c58988c 100644
--- a/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
+++ b/kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
@@ -14,3 +14,13 @@
     display: initial;
   }
 }
+
+.toolbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  min-height: 64px;
+  max-height: 64px;
+}