From a35d85d7dfeb89c7e4967671e8aff0ebe2ae78cc Mon Sep 17 00:00:00 2001
From: Isaac Grynsztein <IsaacMGrynsztein@gmail.com>
Date: Wed, 25 Mar 2020 17:05:50 -0400
Subject: [PATCH] Added elevation to top toolbar and made it "sticky". That
 means when users scroll, the toolbar will scroll with

---
 src/app/app.component.css  | 8 ++++++++
 src/app/app.component.html | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index a902545..59009fe 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -16,4 +16,12 @@
     top: 2px;
     left: 10px;
     position: relative;
+}
+
+.sidenav-container {
+    z-index: -1 !important;
+}
+
+.top-toolbar {
+    height: 64px;
 }
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8291ae3..ae8ba4b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,13 +1,13 @@
 <div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
-    <div>
-        <mat-toolbar color="primary" class="top">
+    <div class="mat-elevation-z3" style="position: relative; z-index: 10;">
+        <mat-toolbar color="primary" class="sticky-toolbar top-toolbar">
             <div class="flex-row" width="100%" height="100%">
                 <div class="flex-column" style="text-align: left; margin-top: 1px;">
                     <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player' && allowSubscriptions" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                     <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
                 </div>
                 <div class="flex-column" style="text-align: center; margin-top: 5px;">
-                    <div>{{topBarTitle}}</div>
+                    <div style="font-size: 22px;">{{topBarTitle}}</div>
                 </div>
                 <div class="flex-column" style="text-align: right; align-items: flex-end;">
                     <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
@@ -30,7 +30,7 @@
             </div>
         </mat-toolbar>
     </div>
-    <div style="height: calc(100% - 64px)">
+    <div class="sidenav-container" style="height: calc(100% - 64px)">
         <mat-sidenav-container style="height: 100%">
             <mat-sidenav #sidenav>
                 <mat-nav-list>