css changes to make scrollbar sticky

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

src/app/Sidebar.vue

@@ -18,65 +18,73 @@
     </b-sidebar>
   </div>
 </template>
-<style>
+<style lang="scss">
-  .sidebar-container .sidebar-fixed {
+.sidebar-container {
+  .nav {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: white transparent;
+    max-height: 100vh;
+    padding-bottom: 80px;
+    flex-wrap: nowrap;
+  }
+  .sidebar-fixed {
+    position: sticky;
+    top: 0;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
-    padding-bottom: 180px;
     width: 250px;
   }
-
+  .sidebar-brand {
-  .sidebar-container .sidebar-brand {
     padding: 1rem 1rem 0.75rem;
   }
-
+  .sidebar-heading {
-  .sidebar-container .sidebar-heading {
     padding: 0.5rem 1rem;
     font-weight: bold;
     text-transform: uppercase;
     display: block;
   }
 
-  .sidebar-container .nav-link {
+  a.nav-link {
+    flex-shrink: 0;
     width: calc(100%);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }
+    .b-icon {
-
-  .sidebar-container a.nav-link .b-icon {
       margin-right: 0.75rem;
     }
-
+    &:not(.router-link-active) .b-icon {
-  .sidebar-container .nav-link:not(.router-link-active) .b-icon {
       color: var(--text-muted);
     }
-  .sidebar-container .nav-link:hover {
+    &:hover {
       color: inherit;
       background-color: rgba(255, 255, 255, 0.045);
     }
-  .sidebar-container .nav-link.router-link-active {
+    &.router-link-active {
       color: var(--primary);
       background-color: rgba(255, 255, 255, 0.045);
-  }
+      &:hover {
-  .sidebar-container .nav-link.router-link-active:hover {
         color: var(--primary);
       }
+    }
+  }
+}
 </style>
 <script lang="ts">
-  import Vue from 'vue'
+import Vue from "vue";
-  import Nav from './Nav.vue'
+import Nav from "./Nav.vue";
-  import { mapState, mapActions } from 'vuex'
+import { mapState, mapActions } from "vuex";
 
 export default Vue.extend({
   components: {
     Nav,
   },
   computed: {
-      ...mapState(['showMenu'])
+    ...mapState(["showMenu"]),
   },
   methods: {
-      ...mapActions(['hideMenu']),
+    ...mapActions(["hideMenu"]),
   },
-  })
+});
 </script>