finishing touches to menu

package.json

@@ -183,7 +183,7 @@
     "karma-webdriver-launcher": "1.0.5",
     "karma-webpack": "3.0.0",
     "ngrx-store-freeze": "^0.2.4",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.11.0",
     "nodemon": "^1.15.0",
     "npm-run-all": "4.1.3",
     "postcss": "^7.0.2",

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="#"
+    <div class="icon-wrapper">
-       (click)="toggleSection($event)">
+        <a class="nav-item nav-link shortcut-icon" (click)="toggleSection($event)" href="#">
-        <i class="fas fa-{{icon}} fa-fw"></i>
+            <i class="fas fa-{{icon}} fa-fw"></i>
-    </a>
+        </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;
+    overflow-wrap: break-word;
-  word-wrap: break-word;
+    word-wrap: break-word;
-  -ms-word-break: break-all;
+    -ms-word-break: break-all;
-  word-break: break-all;
+    word-break: break-all;
-  word-break: break-word;
+    word-break: break-word;
-  -ms-hyphens: auto;
+    -ms-hyphens: auto;
-  -moz-hyphens: auto;
+    -moz-hyphens: auto;
-  -webkit-hyphens: auto;
+    -webkit-hyphens: auto;
-  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;
+    }
+
 }

yarn.lock

@@ -5495,9 +5495,9 @@ node-releases@^1.0.0-alpha.11:
   dependencies:
     semver "^5.3.0"
 
-node-sass@^4.7.2:
+node-sass@^4.11.0:
-  version "4.9.3"
+  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.3.tgz#f407cf3d66f78308bb1e346b24fa428703196224"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -5514,7 +5514,7 @@ node-sass@^4.7.2:
     nan "^2.10.0"
     node-gyp "^3.8.0"
     npmlog "^4.0.0"
-    request "2.87.0"
+    request "^2.88.0"
     sass-graph "^2.2.4"
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
@@ -7029,32 +7029,7 @@ request@2.85.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
-request@2.87.0:
+request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.87.0, request@^2.88.0:
-  version "2.87.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.6.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
-    forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.17"
-    oauth-sign "~0.8.2"
-    performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    tough-cookie "~2.3.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.1.0"
-
-request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.87.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   dependencies: