refactor: sidebar

- feat: vue-perfect-scrollbar
- fix: hideMobile with toggle `sidebar-show` (deprecate `sidebar-mobile-show`)
- update" dependencies

package.json

@@ -17,15 +17,17 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "@coreui/coreui": "next",
+    "@coreui/coreui": "^2.0.0-beta.4",
     "bootstrap": "^4.0.0",
     "bootstrap-vue": "^2.0.0-rc.6",
     "chart.js": "^2.7.2",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
+    "perfect-scrollbar": "^1.3.0",
     "simple-line-icons": "^2.4.1",
     "vue": "2.5.16",
     "vue-chartjs": "^3.3.1",
+    "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -34,7 +36,7 @@
     "babel-eslint": "^8.2.2",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.4",
-    "babel-plugin-istanbul": "^4.1.5",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",

src/components/Sidebar/SidebarNav.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="sidebar-nav">
-    <div slot="header"></div>
+    <VuePerfectScrollbar class="scroll-area" :settings="psSettings" @ps-scroll-y="scrollHandle">
     <ul class="nav">
       <template v-for="(item, index) in navItems">
         <template v-if="item.title">
@@ -42,6 +42,7 @@
       </template>
     </ul>
     <slot></slot>
+    </VuePerfectScrollbar>
   </nav>
 </template>
 
@@ -52,6 +53,8 @@ import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
 import SidebarNavItem from './SidebarNavItem'
 import SidebarNavLabel from './SidebarNavLabel'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
+
 export default {
   name: 'SidebarNav',
   props: {
@@ -67,13 +70,28 @@ export default {
     SidebarNavLink,
     SidebarNavTitle,
     SidebarNavItem,
-    SidebarNavLabel
+    SidebarNavLabel,
+    VuePerfectScrollbar
+  },
+  data () {
+    return {
+      psSettings: {
+        maxScrollbarLength: 200
+      }
+    }
+  },
+  methods: {
+    scrollHandle (evt) {
+      // console.log(evt)
+    }
   }
 }
 </script>
 
 <style scoped lang="css">
-  .nav-link {
+  .scroll-area {
-    cursor:pointer;
+    position: relative;
+    height: 100%;
+    margin: auto;
   }
 </style>

src/components/Sidebar/SidebarNavDropdown.vue

@@ -39,3 +39,9 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="css">
+  .nav-link {
+    cursor:pointer;
+  }
+</style>

src/components/Sidebar/SidebarNavItem.vue

@@ -26,8 +26,8 @@ export default {
   },
   methods: {
     hideMobile () {
-      if (document.body.classList.contains('sidebar-mobile-show')) {
+      if (document.body.classList.contains('sidebar-show')) {
-        document.body.classList.toggle('sidebar-mobile-show')
+        document.body.classList.toggle('sidebar-show')
       }
     }
   }