Updated style of top toolbar

- removed title
- added logo which navigates users home
- removed blue color

src/app/app.component.css

@@ -24,6 +24,7 @@
 
 .top-toolbar {
     height: 64px;
+    background: unset;
 }
 
 ::ng-deep .top-menu-button > span {

src/app/app.component.html

@@ -1,17 +1,16 @@
 <div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
     <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;">
+        <mat-toolbar class="sticky-toolbar top-toolbar">
+            <div class="container-fluid" style="padding-left: 0px; padding-right: 0px">
+                <div class="row" width="100%" height="100%">
+                    <div class="col-6" style="text-align: left; margin-top: 1px;">
+                        <div style="display: flex; align-items: center;">
                             <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" 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 style="margin-left: 8px; display: inline-block;"><a routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></a></div>
                         </div>
-                <div class="flex-column" style="text-align: center; justify-content: center;">
-                    <div style="font-size: 22px; text-shadow: #141414 0.25px 0.25px 1px;">
-                        {{topBarTitle}}
                     </div>
-                </div>
-                <div class="flex-column" style="text-align: right; align-items: flex-end; display: inline-block">
+                    <div class="col-6" style="text-align: right; align-items: flex-end; display: inline-block">
                         <button [matMenuTriggerFor]="notificationsMenu" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
                         <mat-menu (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
                             <app-notifications #notifications (notificationCount)="notificationCountUpdate($event)" (click)="$event.stopPropagation()"></app-notifications>
@@ -34,6 +33,7 @@
                         </mat-menu>
                     </div>
                 </div>
+            </div>
         </mat-toolbar>
     </div>
     <div class="sidenav-container" style="height: calc(100% - 64px)">