From 6f5134e860035f17773c5dba5f5b6ca1a293a77f Mon Sep 17 00:00:00 2001
From: Jivjyot Singh <jivjyotsingh@gmail.com>
Date: Thu, 3 Jan 2019 02:16:42 +0530
Subject: [PATCH] fix: make side-nav scrollable (#362)

- update shell.component.scss file to add scroll bar when content overflows.
- update sidenav.component.scss to remove absolute positioned app icon and fix frequently visited links spacing.
- update sidenav.component.html to move frequently visited links heading to parent container.

Fixes: #358
---
 src/app/core/shell/shell.component.scss       |  2 +-
 .../core/shell/sidenav/sidenav.component.html |  8 ++---
 .../core/shell/sidenav/sidenav.component.scss | 32 ++++++++-----------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss
index cf371c72d..608bf7485 100644
--- a/src/app/core/shell/shell.component.scss
+++ b/src/app/core/shell/shell.component.scss
@@ -5,7 +5,7 @@
   .sidebar-panel {
     background-color: #fff;
     min-height: 100vh;
-    overflow: hidden;
+    overflow: auto;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
 
diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html
index 05af9c12d..16df5c96e 100644
--- a/src/app/core/shell/sidenav/sidenav.component.html
+++ b/src/app/core/shell/sidenav/sidenav.component.html
@@ -33,11 +33,11 @@
     <div class="app-sidenav">
 
       <!-- TODO: Generate frequently accessed routes dynamically -->
+      <div class="mt-1 mb-1 nav-item-sep">
+        <mat-divider></mat-divider>
+        <span class="text-muted icon-menu-title">Frequently Accessed</span>
+      </div>
       <div class="icon-menu">
-        <div class="mt-1 mb-1 nav-item-sep">
-          <mat-divider></mat-divider>
-          <span class="text-muted icon-menu-title">Frequently Accessed</span>
-        </div>
         <div class="icon-menu-item">
           <button mat-raised-button matTooltip="Home" [routerLink]="['/home']">
             <fa-icon icon="home" size="lg"></fa-icon>
diff --git a/src/app/core/shell/sidenav/sidenav.component.scss b/src/app/core/shell/sidenav/sidenav.component.scss
index 5954feaaa..4c5f68f3c 100644
--- a/src/app/core/shell/sidenav/sidenav.component.scss
+++ b/src/app/core/shell/sidenav/sidenav.component.scss
@@ -1,11 +1,9 @@
 .sidebar-full,
 .sidebar-compact {
   .navigation-panel {
-    position: absolute;
-    left: 0;
     width: 100%;
     height: 100%;
-    padding-top: 64px;
+    padding-top: 20%;
     background: hsla(0, 0%, 100%, 0.95);
   }
 
@@ -18,13 +16,7 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    position: fixed;
-    width: 100%;
     max-width: 15rem;
-    height: 64px;
-    line-height: 64px;
-    top: 0;
-    left: 0;
     z-index: 9999;
     color: #444;
 
@@ -96,8 +88,9 @@
 
   .app-sidenav {
     .icon-menu {
-      padding: 0 24px;
-      opacity: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
 
       .mat-divider {
         margin: 0 -24px;
@@ -171,13 +164,16 @@
       span {
         display: none;
       }
-
-      .icon-menu-item {
-        button {
-          margin: 0 0 4px 0;
-          padding: 0 20px;
-        }
-      }
+    }
+  }
+}
+.sidebar-full {
+  .navigation-panel {
+    padding-top: 5%;
+  }
+  .app-sidenav {
+    .icon-menu {
+      flex-direction: row;
     }
   }
 }