fix: Add IE polyfills, add vue-perfect-scrollbar to DefaultContainer, change packages

src/containers/DefaultContainer.vue

@@ -32,7 +32,13 @@
       <CSidebar fixed>
         <CSidebarHeader/>
         <CSidebarForm/>
-        <CSidebarNav :navItems="computedNav"></CSidebarNav>
+        <!-- <CSidebarNav :navItems="computedNav"/> -->
+        <nav class="sidebar-nav">
+          <VuePerfectScrollbar class="scroll-area" :settings="psSettings"
+                               @ps-scroll-y="scrollHandle">
+              <CSidebarNavItems :items="computedNav"/>
+          </VuePerfectScrollbar>
+        </nav>
         <CSidebarFooter/>
         <CSidebarMinimizer/>
       </CSidebar>
@@ -65,12 +71,14 @@
 import nav from '@/_nav'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
 export default {
   name: 'full',
   components: {
     DefaultAside,
     DefaultHeaderDropdownAccnt,
+    VuePerfectScrollbar
   },
   data () {
     return {
@@ -80,7 +88,31 @@ export default {
   computed: {
     computedNav () {
       return this.nav.filter((item) => item.name !== 'Dashboard')
+    },
+    psSettings: () => {
+      // ToDo: find better rtl fix
+      return {
+        maxScrollbarLength: 200,
+        minScrollbarLength: 40,
+        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
+        wheelPropagation: false,
+        interceptRailY: styles => ({ ...styles, height: 0 })
+      }
+    }
+  },
+  methods: {
+    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
+    scrollHandle (evt) {
+      // console.log(evt)
     }
   }
 }
 </script>
+
+<style scoped lang="css">
+  .scroll-area {
+    position: absolute;
+    height: 100%;
+    margin: auto;
+  }
+</style>

src/main.js

@@ -1,27 +1,21 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
 import 'core-js/es6/promise'
 import 'core-js/es6/string'
 import 'core-js/es7/array'
+import '@babel/polyfill'
 
 // import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
-
-
-
-//only for development with link
-import CoreuiVueLink from '@coreui/vue/src'
-// import CoreuiVue from '@coreui/vue'
-
+import CoreuiVue from '@coreui/vue'
 Vue.config.performance = true
 
 // todo
 // cssVars()
-Vue.use(BootstrapVue)
-Vue.use(CoreuiVueLink)
+Vue.use(CoreuiVue)
 
 
 /* eslint-disable no-new */

src/views/users/Users.vue

@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol cols="12" xl="6">
+    <CCol cols="12" xl="8">
       <transition name="slide">
         <CCard header="users">
           <CTable hover