From 678f25f3a9578c1c52ae9e68b7d80bb2edacb221 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 19 Oct 2023 10:11:59 +0700
Subject: [PATCH] fix aside expanded when load page

---
 src/components/Navigation/Aside/Aside.vue     | 21 +++++++++++++++++--
 .../Navigation/Aside/AsideMenuMultiple.vue    |  2 +-
 src/stores/menu.ts                            |  3 +--
 src/utils/numbers.ts                          |  0
 src/utils/texts.ts                            | 17 +++++++++++++++
 5 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/numbers.ts
 create mode 100644 src/utils/texts.ts

diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 3cc2573..8d43130 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-import { useRoute, RouterLink } from 'vue-router'
+import { onMounted, watch } from 'vue'
+import { useRoute, RouterLink, useRouter } from 'vue-router'
 import {
     Dialog,
     DialogPanel,
@@ -13,15 +13,31 @@ import { IconApp } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
 import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
+import { splitRoutePath } from '@/utils/texts'
 
 const menu = useMenuStore()
 const route = useRoute()
+const router = useRouter()
 
 watch(route, (to, _) => {
     menu.menuSelected = to.fullPath
+    console.log('path', menu.menuSelected);
     closeSideBar()
 })
 
+onMounted(() => {
+    menu.menuSelected = router.currentRoute.value.fullPath
+    if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
+        const result = splitRoutePath(menu.menuSelected)
+
+        for (const route of result) {
+            if (route !== '/home') {
+                menu.toggleSidebarMenu(route, true)
+            }
+        }
+    }
+})
+
 const isMenu = (name: string) => {
     return menu.menuSelected === name
 }
@@ -115,3 +131,4 @@ const closeSideBar = () => menu.toggleSidebar()
     </div>
 </template>
 
+@/utils/text@/utils/texts
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 21e48ca..949b8c1 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps } from 'vue'
+import { computed, defineProps, onMounted } from 'vue'
 import type { MenuItemModel } from '@/utils/interfaces'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 3e9b5ff..b9852f9 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -10,7 +10,7 @@ import {
     Swap
 } from '@/utils/icons'
 import type { MenuItemModel } from '@/utils/interfaces'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 export const useMenuStore = defineStore('menu', () => {
     const route = useRoute()
@@ -635,7 +635,6 @@ export const useMenuStore = defineStore('menu', () => {
         toggleItemExpanded(navigation.value)
     }
     const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
-
     return {
         navigation,
         toggleSidebar,
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
new file mode 100644
index 0000000..18dac0f
--- /dev/null
+++ b/src/utils/texts.ts
@@ -0,0 +1,17 @@
+const splitRoutePath = (routePath: string): string[] => {
+    const routeParts = routePath.split('/').filter((part) => part !== '')
+
+    const routeArray: string[] = []
+    let currentRoute = ''
+
+    for (const part of routeParts) {
+        currentRoute += `/${part}`
+        routeArray.push(currentRoute)
+    }
+
+    return routeArray
+}
+
+export {
+    splitRoutePath
+}
\ No newline at end of file