refactor: improve the scrollbar behavior

Author: mrholek

package.json

@@ -12,7 +12,7 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "vite build",
     "lint": "eslint \"src/**/*.{js,vue}\"",
     "preview": "vite preview"
@@ -27,6 +27,7 @@
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
+    "simplebar-vue": "^2.3.3",
     "vue": "^3.3.9",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"

src/components/AppSidebarNav.js

@@ -1,15 +1,12 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
-import {
-  CBadge,
-  CSidebarNav,
-  CNavItem,
-  CNavGroup,
-  CNavTitle,
-} from '@coreui/vue'
+import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
+import simplebar from 'simplebar-vue'
+import 'simplebar-vue/dist/simplebar.min.css'
+
 const normalizePath = (path) =>
   decodeURI(path)
     .replace(/#.*$/, '')
@@ -62,6 +59,7 @@ const AppSidebarNav = defineComponent({
         return h(
           CNavGroup,
           {
+            as: 'div',
             compact: true,
             ...(firstRender.value && {
               visible: item.items.some((child) => isActiveItem(route, child)),
@@ -93,6 +91,7 @@ const AppSidebarNav = defineComponent({
                   resolveComponent(item.component),
                   {
                     active: props.isActive,
+                    as: 'div',
                     href: props.href,
                     onClick: () => props.navigate(),
                   },
@@ -103,11 +102,7 @@ const AppSidebarNav = defineComponent({
                             customClassName: 'nav-icon',
                             name: item.icon,
                           })
-                        : h(
-                            'span',
-                            { class: 'nav-icon' },
-                            h('span', { class: 'nav-icon-bullet' }),
-                          ),
+                        : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
                       item.name,
                       item.badge &&
                         h(
@@ -127,7 +122,9 @@ const AppSidebarNav = defineComponent({
           )
         : h(
             resolveComponent(item.component),
-            {},
+            {
+              as: 'div',
+            },
             {
               default: () => item.name,
             },
@@ -137,7 +134,9 @@ const AppSidebarNav = defineComponent({
     return () =>
       h(
         CSidebarNav,
-        {},
+        {
+          as: simplebar,
+        },
         {
           default: () => nav.map((item) => renderItem(item)),
         },