Removed vue-custom-scrollbar and added smooth-scrollbar instead and implemented it for sidebar and homepage

package-lock.json

@@ -4282,8 +4282,7 @@
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
-      "dev": true
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -10152,6 +10151,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
       "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._arraycopy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
@@ -14678,6 +14682,16 @@
       "dev": true,
       "optional": true
     },
+    "smooth-scrollbar": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/smooth-scrollbar/-/smooth-scrollbar-8.4.0.tgz",
+      "integrity": "sha512-ROKPDABrNcCpiR7grzyRMykYtWSP7qyX59Ka/fcSPRYcixYPZhzW5mkg6EuAHMBvvVc9iHst7mOnnuM0+C/kBQ==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "lodash-es": "^4.17.11",
+        "tslib": "^1.9.3"
+      }
+    },
     "smtp-connection": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz",
@@ -16148,8 +16162,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "tsscmp": {
       "version": "1.0.6",

package.json

@@ -61,6 +61,7 @@
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
     "roboto-slab-fontface-kit": "^1.0.2",
+    "smooth-scrollbar": "^8.4.0",
     "vue": "^2.5.16",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",

src/renderer/layouts/DockableSidebar.vue

@@ -17,8 +17,7 @@
             <Logo :nopadding="true"/>
         </section>
         <section class="overlay" :class="{'open': menuStatus === true}"  @click="toggleMenuStatus" />
-        <section >
-            <vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}"  :settings="settings">
+            <section class="sidebar" :class="{'open': menuStatus === true}">
                 <div class="logo-wrapper">
                     <Logo class="logo" />
                 </div>
@@ -116,7 +115,6 @@
                         Version {{version}}
                     </MenuItem>
                 </MenuGroup>
-            </vue-custom-scrollbar>
             </section>
     </div>
 </template>
@@ -128,13 +126,16 @@ 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'
-
+import Scrollbar from 'smooth-scrollbar'
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
+  components: { MenuGroup, MenuItem, Logo, Button },
   data: () => {
-    return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
+    return { version: projectPackage.version }
+  },
+  mounted () {
+    let container = this.$el.getElementsByClassName('sidebar')[0]
+    Scrollbar.init(container)
   },
   methods: {
     ...mapActions(['toggleMenuStatus'])
@@ -143,7 +144,7 @@ export default {
 }
 </script>
 
-<style scoped lang="sass">
+<style lang="sass">
 section.handle
     position: absolute
     left: 0
@@ -198,6 +199,9 @@ section.sidebar
     flex-direction: column
     overflow-y: hidden
     transition: width 300ms,transform 300ms,padding 500ms
+    .scroll-content
+        display: flex
+        flex-direction: column
     .logo-wrapper
         min-height: 48px
         .icon

src/renderer/layouts/HomePage.vue

@@ -1,5 +1,5 @@
 <template>
-    <section>
+      <section class="wtf">
         <ActionBar class="action-bar" />
         <div class="upper-row">
           <MusicRow :items='items' />
@@ -68,10 +68,15 @@ import ListItem from '../components/ListItem'
 import Button from '../components/Button'
 import carousel from 'vue-owl-carousel'
 import MusicBox from '../components/MusicBox'
+import Scrollbar from 'smooth-scrollbar'
 
 export default {
   name: 'HomePage',
   components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
+  mounted () {
+    let container = this.$el
+    Scrollbar.init(container)
+  },
   data: () => {
     return {
       items: [