refactor(AppSidebar): update navigation behavior

src/components/AppSidebarNav.js

@@ -1,17 +1,9 @@
-import { defineComponent, h, resolveComponent } from 'vue'
+import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
 import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
-const AppSidebarNav = defineComponent({
-  name: 'AppSidebarNav',
-  components: {
-    CNavItem,
-    CNavGroup,
-    CNavTitle,
-  },
-  setup() {
 const normalizePath = (path) =>
 decodeURI(path)
   .replace(/#.*$/, '')
@@ -44,14 +36,27 @@ const AppSidebarNav = defineComponent({
 return false
 }
 
-    const renderItem = (item) => {
+const AppSidebarNav = defineComponent({
+  name: 'AppSidebarNav',
+  components: {
+    CNavItem,
+    CNavGroup,
+    CNavTitle,
+  },
+  setup() {
     const route = useRoute()
+    const firstRender = ref(true)
 
+    onMounted(() => {
+      firstRender.value = false
+    })
+
+    const renderItem = (item) => {
       if (item.items) {
         return h(
           CNavGroup,
           {
-            active: item.items.some((child) => isActiveItem(route, child)),
+            ...firstRender.value && { visible: item.items.some((child) => isActiveItem(route, child))}
           },
           {
             togglerContent: () => [