finishing touches to menu

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -1,4 +1,5 @@
 @import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
 $icon-z-index: 10;
 
 :host {
@@ -15,6 +16,7 @@ $icon-z-index: 10;
             &.sidebar-top-level-items {
                 flex: 1;
                 overflow: auto;
+                @include dark-scrollbar;
             }
         }
 
@@ -51,6 +53,8 @@ $icon-z-index: 10;
                     .shortcut-icon {
                         padding-left: $spacer;
                         padding-right: $spacer;
+                    }
+                    .shortcut-icon, .icon-wrapper {
                         background-color: inherit;
                         z-index: $icon-z-index;
                     }

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -2,10 +2,11 @@
     [@bgColor]="{
      value: ((collapsed | async) ? 'startBackground' : 'endBackground'),
      params: {endColor: (sidebarActiveBg | async)}}">
-    <a class="nav-item nav-link shortcut-icon" href="#"
-       (click)="toggleSection($event)">
-        <i class="fas fa-{{icon}} fa-fw"></i>
-    </a>
+    <div class="icon-wrapper">
+        <a class="nav-item nav-link shortcut-icon" (click)="toggleSection($event)" href="#">
+            <i class="fas fa-{{icon}} fa-fw"></i>
+        </a>
+    </div>
     <div class="sidebar-collapsible">
         <a class="nav-item nav-link" href="#"
            (click)="toggleSection($event)">

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -16,5 +16,4 @@
 .sidebar-collapsible {
     display: flex;
     flex-direction: column;
-
 }

src/app/app.component.scss

@@ -1,7 +1,7 @@
 @import '../styles/variables.scss';
 @import '../styles/helpers/font_awesome_imports.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
-@import '../../node_modules/nouislider/distribute/nouislider.min.css';
+@import '../../node_modules/nouislider/distribute/nouislider.min';
 
 html {
   position: relative;

src/styles/_custom_variables.scss

@@ -19,3 +19,6 @@ $admin-sidebar-bg: $dark;
 $admin-sidebar-active-bg: darken($dark, 3%);
 $admin-sidebar-header-bg: darken($dark, 7%);
 $admin-sidebar-width: 250px;
+
+$dark-scrollbar-background: $admin-sidebar-active-bg;
+$dark-scrollbar-foreground: #47495d;

src/styles/_mixins.scss

@@ -1,15 +1,43 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
-@import '../../node_modules/bootstrap/scss/variables.scss';
+@import 'variables.scss';
 
 @mixin word-wrap() {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  word-break: break-all;
-  word-break: break-word;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
+
+@mixin dark-scrollbar() {
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 3px;
+    }
+    &::-webkit-scrollbar-button {
+        background-color: $dark-scrollbar-background;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: lighten($dark-scrollbar-background, 2%);
+    }
+    &::-webkit-scrollbar-track-piece {
+        background-color: $dark-scrollbar-background;
+    }
+    &::-webkit-scrollbar-thumb {
+        height: 50px;
+        background-color: $dark-scrollbar-foreground;
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-corner {
+        background-color: lighten($dark-scrollbar-background, 2%);
+    }
+    &::-webkit-resizer {
+        background-color: $dark-scrollbar-background;
+    }
+
 }