Removes the second row for the headbar

- Instead of the second row there is a toggle-button at the bottom of the side-nav

client/src/app/shared/components/head-bar/head-bar.component.html

@@ -1,9 +1,3 @@
-<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile">
-    <!-- Nav menu -->
-    <button mat-icon-button *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
-        <mat-icon>menu</mat-icon>
-    </button>
-</mat-toolbar>
 <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
     <div class="toolbar-left">
         <!-- Nav menu -->
@@ -36,9 +30,7 @@
 
     <div class="toolbar-right">
         <!-- Extra controls slot -->
-        <div class="extra-controls-wrapper">
         <ng-content select=".extra-controls-slot"></ng-content>
-        </div>
 
         <!-- Main action button - desktop -->
         <button

client/src/app/shared/components/head-bar/head-bar.component.scss

@@ -6,17 +6,16 @@
 }
 
 .sticky-toolbar {
-    position: -webkit-sticky;
+    top: 0;
-    position: -moz-sticky;
-    position: -ms-sticky;
-    position: -o-sticky;
-    position: sticky;
-    top: 0px;
     z-index: 5;
+    position: sticky;
 }
 
 .toolbar-left {
-    display: contents;
+    display: flex;
+    button {
+        margin: 12px 0;
+    }
     .toolbar-left-text {
         margin-left: 10px;
         width: 100%;
@@ -24,6 +23,7 @@
 
         ::ng-deep .title-slot {
             h2 {
+                margin: 16px 0;
                 display: block;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -38,11 +38,7 @@
 }
 
 .toolbar-right {
-    display: contents;
+    display: flex;
-}
-
-.extra-controls-wrapper {
-    display: contents;
     ::ng-deep .extra-controls-slot {
         display: flex;
     }

client/src/app/site/site.component.html

@@ -133,9 +133,22 @@
             <div class="os-footer-logo-container">
                 <os-logo [footer]="true"></os-logo>
             </div>
+
         </mat-nav-list>
+        <!-- Toggle-button -->
+        <div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
+            <button *ngIf="sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button left">
+                <mat-icon>arrow_back_ios</mat-icon>
+            </button>
+        </div>
     </mat-sidenav>
     <mat-sidenav-content>
+        <!-- Toggle-button -->
+        <div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
+            <button *ngIf="!sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button right">
+                <mat-icon>arrow_forward_ios</mat-icon>
+            </button>
+        </div>
         <div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
             <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
                 <router-outlet #o="outlet"></router-outlet>

client/src/app/site/site.component.scss

@@ -7,6 +7,7 @@ mat-sidenav-container {
         border: 0;
         box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
         width: 260px;
+        overflow-x: hidden;
 
         mat-toolbar,
         mat-toolbar-row {
@@ -47,6 +48,48 @@ mat-sidenav-container {
     height: 80px;
     align-items: center;
 }
+
+// CSS for the toggle button
+.nav-toggle-button-container {
+    position: fixed;
+    z-index: 99;
+    bottom: 24px;
+    & > div {
+        position: relative;
+    }
+
+    .nav-toggle-button {
+        bottom: 0;
+
+        position: absolute;
+        visibility: visible;
+        transform: none;
+        width: 24px;
+        min-width: 24px;
+        height: 48px;
+        padding: 0 0 2px;
+
+        &.left {
+            left: 236px;
+            padding-left: 8px;
+            border-radius: 50px 0 0 50px;
+        }
+
+        &.right {
+            left: 0;
+            padding-right: 8px;
+            border-radius: 0 50px 50px 0;
+        }
+
+        mat-icon {
+            $size: 18px;
+            height: $size;
+            width: $size;
+            font-size: $size;
+        }
+    }
+}
+
 /* The top logo container can contain any logo with any size.
    It needs to always fit.*/
 .os-logo-container {

client/src/app/site/site.component.scss-theme.scss

@@ -17,6 +17,11 @@
             background-color: mat-color($background, card); //TODO
         }
 
+        .nav-toggle-button {
+            background: mat-color($background, background);
+            color: mat-color($foreground, icon);
+        }
+
         /* seperator */
         mat-nav-list.main-nav,
         mat-divider {

client/src/styles.scss

@@ -630,7 +630,7 @@ button.mat-menu-item.selected {
  * from 100vh
  */
 .virtual-scroll-full-page {
-    height: calc(100vh - 128px);
+    height: calc(100vh - 64px);
 }
 
 /** css hacks https://codepen.io/edge0703/pen/iHJuA */
@@ -640,7 +640,7 @@ button.mat-menu-item.selected {
 }
 
 .virtual-scroll-with-head-bar {
-    height: calc(100vh - 189px);
+    height: calc(100vh - 125px);
 
     // For some reason, hiding the table header adds an empty meta bar.
     .pbl-ngrid-container {