refactor: update shared components

src/components/AppHeaderDropdownAccnt.vue

@@ -1,11 +1,11 @@
 <template>
   <CDropdown variant="nav-item">
     <CDropdownToggle placement="bottom-end" class="py-0" :caret="false">
-      <CAvatar :src="avatar" size="md"/>
+      <CAvatar :src="avatar" size="md" />
     </CDropdownToggle>
-    <CDropdownMenu>
+    <CDropdownMenu class="pt-0">
-      <CDropdownHeader tag="div" class="text-center" color="light">
+      <CDropdownHeader component="h6" class="bg-light fw-semibold py-2">
-        <strong>Account</strong>
+        Account
       </CDropdownHeader>
       <CDropdownItem>
         <CIcon icon="cil-bell" /> Updates
@@ -23,7 +23,7 @@
         <CIcon icon="cil-comment-square" /> Comments
         <CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
-      <CDropdownHeader tag="div" class="text-center" color="light">
+      <CDropdownHeader component="h6" class="bg-light fw-semibold py-2">
         <strong>Settings</strong>
       </CDropdownHeader>
       <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
@@ -48,12 +48,12 @@
 <script>
 import avatar from './../assets/images/avatars/8.jpg'
 export default {
-  name: "AppHeaderDropdownAccnt",
+  name: 'AppHeaderDropdownAccnt',
   data() {
     return {
       avatar: avatar,
       itemsCount: 42,
-    };
+    }
   },
-};
+}
 </script>

src/components/AppSidebar.vue

@@ -1,5 +1,17 @@
 <template>
-  <CSidebar position="fixed" selfHiding="md" :unfoldable="sidebarUnfoldable" :visible="sidebarVisible">
+  <CSidebar
+    position="fixed"
+    selfHiding="md"
+    :unfoldable="sidebarUnfoldable"
+    :visible="sidebarVisible"
+    @visible-change="
+      (event) =>
+        $store.commit({
+          type: 'updateSidebarVisible',
+          value: event,
+        })
+    "
+  >
     <CSidebarBrand>
       <CIcon
         customClassName="sidebar-brand-full"

src/components/AppSidebarNav.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, resolveComponent } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 
 import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
@@ -12,20 +12,46 @@ const AppSidebarNav = defineComponent({
     CNavTitle,
   },
   setup() {
+    const normalizePath = (path) =>
+      decodeURI(path)
+        .replace(/#.*$/, '')
+        .replace(/(index)?\.(html)$/, '')
+
+    const isActiveLink = (route, link) => {
+      if (link === undefined) {
+        return false
+      }
+
+      if (route.hash === link) {
+        return true
+      }
+
+      const currentPath = normalizePath(route.path)
+      const targetPath = normalizePath(link)
+
+      return currentPath === targetPath
+    }
+
+    const isActiveItem = (route, item) => {
+      if (isActiveLink(route, item.to)) {
+        return true
+      }
+
+      if (item.children) {
+        return item.children.some((child) => isActiveItem(route, child))
+      }
+
+      return false
+    }
+
     const renderItem = (item) => {
+      const route = useRoute()
+
       if (item.children) {
         return h(
-          RouterLink,
-          {
-            to: item.route,
-            custom: true,
-          },
-          {
-            default: (props) =>
-              h(
           resolveComponent('CNavGroup'),
           {
-                  visible: props.isActive,
+            visible: item.children.some((child) => isActiveItem(route, child)),
           },
           {
             togglerContent: () => [
@@ -35,10 +61,7 @@ const AppSidebarNav = defineComponent({
               }),
               item.name,
             ],
-                  default: () =>
+            default: () => item.children.map((child) => renderItem(child)),
-                    item.children.map((child) => renderItem(child)),
-                },
-              ),
           },
         )
       }
@@ -76,7 +99,7 @@ const AppSidebarNav = defineComponent({
                           },
                           {
                             default: () => item.badge.text,
-                          }
+                          },
                         ),
                     ],
                   },

src/components/DocsCallout.vue

@@ -0,0 +1,41 @@
+<template>
+  <CCallout color="info" class="bg-white">
+    A Vue {{name}} component {{plural ? 'have' : 'has'}} been created as a native
+    Vue.js version of Bootstrap {{name}}. {{name}} {{plural ? 'are' : 'is'}}
+    delivered with some new features, variants, and unique design that matches
+    CoreUI Design System requirements.
+    <br />
+    <br />
+    For more information please visit our official
+    <CLink :href="href" target="_blank">
+      documentation of CoreUI Components Library for Vue.js
+    </CLink>
+    .
+  </CCallout>
+</template>
+
+<script>
+import packageJson from '../../package.json'
+export default {
+  name: 'DocsCallout',
+  props: {
+    href: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
+    name: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
+  },
+  setup(props) {
+    const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`
+
+    return {
+      href,
+    }
+  },
+}
+</script>

src/components/DocsExample.vue

@@ -24,7 +24,7 @@
 <script>
 import packageJson from "../../package.json";
 export default {
-  name: "Example",
+  name: "DocsExample",
   props: {
     href: {
       type: String,