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 {
+      margin-right: 0.75rem;
+    }
+    &:not(.router-link-active) .b-icon {
+      color: var(--text-muted);
+    }
+    &:hover {
+      color: inherit;
+      background-color: rgba(255, 255, 255, 0.045);
+    }
+    &.router-link-active {
+      color: var(--primary);
+      background-color: rgba(255, 255, 255, 0.045);
+      &:hover {
+        color: var(--primary);
+      }
+    }
   }
-
+}
-  .sidebar-container a.nav-link .b-icon {
-    margin-right: 0.75rem;
-  }
-
-  .sidebar-container .nav-link:not(.router-link-active) .b-icon {
-    color: var(--text-muted);
-  }
-  .sidebar-container .nav-link:hover {
-    color: inherit;
-    background-color: rgba(255, 255, 255, 0.045);
-  }
-  .sidebar-container .nav-link.router-link-active {
-    color: var(--primary);
-    background-color: rgba(255, 255, 255, 0.045);
-  }
-  .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({
+export default Vue.extend({
-    components: {
+  components: {
-      Nav,
+    Nav,
-    },
+  },
-    computed: {
+  computed: {
-      ...mapState(['showMenu'])
+    ...mapState(["showMenu"]),
-    },
+  },
-    methods: {
+  methods: {
-      ...mapActions(['hideMenu']),
+    ...mapActions(["hideMenu"]),
-    },
+  },
-  })
+});
 </script>