Added and configured vue-custom-scrollbar

package-lock.json

@@ -12370,6 +12370,11 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "perfect-scrollbar": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
+      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -16662,6 +16667,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-custom-scrollbar": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",
+      "integrity": "sha512-ZXf4Kjg7NZxVF6vo3OyXdueRkwHPp1qal+W08Ea6dJQcmm6FaCjJBrc6ukYbTEHMZHc2v8QNBpJg7pi4AYLhTA==",
+      "requires": {
+        "perfect-scrollbar": "^1.4.0",
+        "vue": "^2.5.17"
+      }
+    },
     "vue-electron": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue-electron/-/vue-electron-1.0.6.tgz",

package.json

@@ -59,6 +59,7 @@
     "axios": "^0.18.0",
     "normalize-scss": "^7.0.1",
     "vue": "^2.5.16",
+    "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",

src/renderer/layouts/DockableSidebar.vue

@@ -17,7 +17,8 @@
             <Logo :nopadding="true"/>
         </section>
         <section class="overlay" :class="{'open': menuStatus === true}"  @click="toggleMenuStatus" />
-        <section class="sidebar" :class="{'open': menuStatus === true}">
+        <section >
+            <vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}"  :settings="settings">
                 <div class="logo-wrapper">
                     <div @click="toggleMenuStatus" class="icon">
                         <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
@@ -128,6 +129,7 @@
                         Version {{version}}
                     </MenuItem>
                 </MenuGroup>
+            </vue-custom-scrollbar>
         </section>        
     </div>
 </template>
@@ -139,12 +141,13 @@ import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
 import Button from '../components/Button'
+import vueCustomScrollbar from 'vue-custom-scrollbar'
 
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo, Button },
+  components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
   data: () => {
-    return { version: projectPackage.version }
+    return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
   },
   methods: {
     ...mapActions(['toggleMenuStatus'])
@@ -198,12 +201,12 @@ section.sidebar
     max-width: 250px
     min-height: 100vh
     max-height: 100vh
-    padding: 2rem 2rem 0rem 2rem
+    padding: 2rem 0rem 0rem 2rem
     box-sizing: border-box
     background-color: #fcfcfc
     display: flex
     flex-direction: column
-    overflow-y: auto
+    overflow-y: hidden
     transition: width 300ms,transform 300ms,padding 500ms
     .logo-wrapper
         min-height: 48px
@@ -211,9 +214,9 @@ section.sidebar
             display: none
     &.open
         transform: translateX(0%)
-        padding: 1rem 1rem 0rem 1rem
+        padding: 1rem 0rem 0rem 1rem
         width: 300px
-        overflow-y: auto
+        overflow-y: hidden
         
     .playlist-button
         align-self: flex-start
@@ -228,7 +231,7 @@ section.sidebar
     section.sidebar
         width: 200px
         overflow-y: auto
-        padding: 1rem 1rem 0rem 1rem
+        padding: 1rem 0rem 0rem 1rem
 @media(max-width: 800px)
     section.sidebar
         transform: translateX(-100%)