From 261b0f551934b0cfc85c5f2bddad1faa97f56ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Thu, 28 Oct 2021 23:58:37 +0200
Subject: [PATCH] refactor(AppSidebar): update navigation behavior

---
 src/components/AppSidebarNav.js | 73 ++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 4fbb19b3..fcc2f7dc 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,9 +1,41 @@
-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 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.items) {
+  return item.items.some((child) => isActiveItem(route, child))
+}
+
+return false
+}
+
 const AppSidebarNav = defineComponent({
   name: 'AppSidebarNav',
   components: {
@@ -12,46 +44,19 @@ const AppSidebarNav = defineComponent({
     CNavTitle,
   },
   setup() {
-    const normalizePath = (path) =>
-      decodeURI(path)
-        .replace(/#.*$/, '')
-        .replace(/(index)?\.(html)$/, '')
+    const route = useRoute()
+    const firstRender = ref(true)
 
-    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.items) {
-        return item.items.some((child) => isActiveItem(route, child))
-      }
-
-      return false
-    }
+    onMounted(() => {
+      firstRender.value = false
+    })
 
     const renderItem = (item) => {
-      const route = useRoute()
-
       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: () => [