fix(sidebar): Added extra container option so nav isn't required and when both are not set then return null for perfectScrollbar

Author: MartijnBastiaansen

js/src/sidebar.js

@@ -59,7 +59,8 @@ const Sidebar = (($) => {
     NAVIGATION           : '.sidebar-nav > .nav',
     SIDEBAR              : '.sidebar',
     SIDEBAR_MINIMIZER    : '.sidebar-minimizer',
-    SIDEBAR_TOGGLER      : '.sidebar-toggler'
+    SIDEBAR_TOGGLER      : '.sidebar-toggler',
+    SIDEBAR_SCROLL       : '.sidebar-scroll'
   }
 
   const ShowClassNames = [
@@ -127,7 +128,17 @@ const Sidebar = (($) => {
       }
     }
 
-    makeScrollbar(container = Selector.NAVIGATION_CONTAINER) {
+    makeScrollbar() {
+      let container = Selector.SIDEBAR_SCROLL;
+
+      if (document.querySelector(container) === null) {
+        container = Selector.NAVIGATION_CONTAINER;
+
+        if (document.querySelector(container) === null) {
+          return null;
+        }
+      }
+
       const ps = new PerfectScrollbar(document.querySelector(container), {
         suppressScrollX: true
       })

scss/_sidebar.scss

@@ -45,14 +45,25 @@
     }
   }
 
-  .sidebar-nav {
+  .sidebar-scroll {
     position: relative;
     flex: 1;
     overflow-x: hidden;
     overflow-y: auto;
     @include sidebar-width($sidebar-borders, $sidebar-width);
   }
 
+  .sidebar-nav {
+    position: relative;
+    flex: 1;
+    @include sidebar-width($sidebar-borders, $sidebar-width);
+  }
+
+  > .sidebar-nav {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
     flex-direction: column;
@@ -365,6 +376,11 @@
     .sidebar {
       z-index: $zindex-sticky - 1;
 
+      .sidebar-scroll {
+        overflow: visible;
+        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
+      }
+
       .sidebar-nav {
         overflow: visible;
         @include sidebar-width($sidebar-borders, $sidebar-minimized-width);