From a7ead703322cbee5a88b59173fc1e9c0760802b9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 18 Oct 2023 14:14:16 +0700
Subject: [PATCH] update aside

---
 src/components/Aside/Aside.vue             |   6 +-
 src/components/Aside/AsideMenuMultiple.vue |  35 +-
 src/stores/menu.ts                         | 550 ++++++++++++++++++++-
 src/utils/interfaces.ts                    |   1 +
 4 files changed, 569 insertions(+), 23 deletions(-)

diff --git a/src/components/Aside/Aside.vue b/src/components/Aside/Aside.vue
index 886d08d..6c0cb99 100644
--- a/src/components/Aside/Aside.vue
+++ b/src/components/Aside/Aside.vue
@@ -19,8 +19,6 @@ import type { MenuItemModel } from '@/utils/interfaces'
 const menu = useMenuStore()
 const route = useRoute()
 
-const navigation = ref<MenuItemModel[]>(menu.navigation)
-
 watch(route, (to, _) => {
     menu.menuSelected = to.fullPath
     closeSideBar()
@@ -68,7 +66,7 @@ const closeSideBar = () => menu.toggleSidebar()
                         </div>
                         <div class="flex-1 h-0 mt-5 overflow-y-auto">
                             <nav class="px-2 space-y-1">
-                                <template v-for="item in navigation" :key="item.name">
+                                <template v-for="item in menu.navigation" :key="item.name">
                                     <!-- Single-level item -->
                                     <AsideMenuSingle v-if="item.children.length === 0" :item="item"
                                         :selected="isMenu(item.href)" />
@@ -97,7 +95,7 @@ const closeSideBar = () => menu.toggleSidebar()
         <div class="flex flex-col flex-grow overflow-y-auto">
             <div class="flex flex-col flex-grow mt-5">
                 <nav class="flex-1 px-2 pb-4 space-y-1">
-                    <template v-for="item in navigation" :key="item.name">
+                    <template v-for="item in menu.navigation" :key="item.name">
                         <!-- Single-level item -->
                         <AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.href)" />
 
diff --git a/src/components/Aside/AsideMenuMultiple.vue b/src/components/Aside/AsideMenuMultiple.vue
index 1c2ff82..3c43cdb 100644
--- a/src/components/Aside/AsideMenuMultiple.vue
+++ b/src/components/Aside/AsideMenuMultiple.vue
@@ -32,17 +32,17 @@ const isMenuSelected = computed(() => {
 </script>
 
 <template>
-    <div :class="[isChildren ? 'ml-4 mt-1 bg-primary-100 rounded-xl' : '']">
-        <Disclosure v-slot="{ open }" v-bind:default-open="isMenuSelected ? true : false" as="div">
+    <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
+        <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
             <!-- Nested item with children -->
-            <DisclosureButton
-                :class="[(isMenuSelected || open || isChildren) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
+            <DisclosureButton @click="menu.toggleExpandedByHref(item.href, !item.expanded)"
+                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
                 <embed :src="isChildren ? DotOutline : item.icon"
                     :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
                     type="image/svg+xml" />
                 <span class="flex-1">{{ item.name }}</span>
 
-                <svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
+                <svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
                     width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                     <path
                         d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
@@ -55,17 +55,20 @@ const isMenuSelected = computed(() => {
                 leave-active-class="overflow-hidden transition-all duration-300"
                 leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
                 leave-to-class="transform scale-95 opacity-0 max-h-0">
-                <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']">
-                    <!-- Nested children -->
-                    <template v-for="(subItem, index) in item.children" :key="subItem.href">
-                        <!-- Single-level child -->
-                        <AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
-                            :selected="isMenu(subItem.href)" />
-                        <!-- Multiple-level child -->
-                        <AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
-                            :is-children="true" />
-                    </template>
-                </DisclosurePanel>
+                <div v-show="item.expanded">
+                    <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
+                        <!-- Nested children -->
+                        <template v-for="(subItem, index) in item.children" :key="subItem.href">
+                            <!-- Single-level child -->
+                            <AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
+                                :selected="isMenu(subItem.href)" />
+                            <!-- Multiple-level child -->
+                            <AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
+                                :is-children="true" />
+                        </template>
+                    </DisclosurePanel>
+                </div>
+
             </transition>
 
         </Disclosure>
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 6eeadd7..3821585 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -11,57 +11,516 @@ import type { MenuItemModel } from '@/utils/interfaces'
 import { useRoute } from 'vue-router'
 
 export const useMenuStore = defineStore('menu', () => {
-    const navigation: MenuItemModel[] = [
+    // const navigation: MenuItemModel[] = [
+    //     {
+    //         name: 'Gangguan',
+    //         href: '/gangguan',
+    //         icon: LightningSlash,
+    //         children: [
+    //             {
+    //                 name: 'Daftar',
+    //                 href: '/gangguan/1',
+    //                 icon: LightningSlash,
+    //                 children: [
+    //                     {
+    //                         name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
+    //                         href: '/gangguan/1/1',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
+    //                         href: '/gangguan/1/2',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Response Time',
+    //                         href: '/gangguan/1/3',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Recovery Time',
+    //                         href: '/gangguan/1/4',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
+    //                         href: '/gangguan/1/5',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Berdasarkan Media',
+    //                         href: '/gangguan/1/6',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Gangguan Diselesaikan Mobile APKT',
+    //                         href: '/gangguan/1/7',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                 ],
+    //             },
+    //             {
+    //                 name: 'Rekapitulasi',
+    //                 href: '/gangguan/2',
+    //                 icon: LightningSlash,
+    //                 children: [
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan All',
+    //                         href: '/gangguan/2/1',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+    //                         href: '/gangguan/2/2',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
+    //                         href: '/gangguan/2/3',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Posko',
+    //                         href: '/gangguan/2/4',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Regu',
+    //                         href: '/gangguan/2/5',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Tanggal',
+    //                         href: '/gangguan/2/6',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Berdasarkan Media',
+    //                         href: '/gangguan/2/7',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Alih  Posko',
+    //                         href: '/gangguan/2/8',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Per Status',
+    //                         href: '/gangguan/2/9',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
+    //                         href: '/gangguan/2/10',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Rating Per Posko',
+    //                         href: '/gangguan/2/11',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Rating Per Regu',
+    //                         href: '/gangguan/2/12',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Koreksi Transaksi Individual',
+    //                         href: '/gangguan/2/13',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Cleansing Transaksi TM',
+    //                         href: '/gangguan/2/14',
+    //                         icon: LightningSlash,
+    //                         children: [],
+    //                     },
+    //                 ],
+    //             },
+    //         ],
+    //     },
+    //     {
+    //         name: 'Keluhan',
+    //         href: '/keluhan',
+    //         icon: SmileySad,
+    //         children: [
+    //             {
+    //                 name: 'Daftar',
+    //                 icon: SmileySad,
+    //                 href: '/keluhan/1',
+    //                 children: [
+    //                     {
+    //                         name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
+    //                         href: '/keluhan/1/1',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
+    //                         href: '/keluhan/1/2',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Response Time',
+    //                         href: '/keluhan/1/3',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Recovery Time',
+    //                         href: '/keluhan/1/4',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
+    //                         href: '/keluhan/1/5',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Berdasarkan Media',
+    //                         href: '/keluhan/1/6',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Daftar Keluhan Selesai di CC123',
+    //                         href: '/keluhan/1/7',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                 ],
+    //             },
+    //             {
+    //                 name: 'Rekapitulasi',
+    //                 icon: SmileySad,
+    //                 href: '/keluhan/2',
+    //                 children: [
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan All',
+    //                         href: '/keluhan/2/1',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
+    //                         href: '/keluhan/2/2',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
+    //                         href: '/keluhan/2/3',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan Per Tanggal',
+    //                         href: '/keluhan/2/4',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan Per Unit',
+    //                         href: '/keluhan/2/5',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                     {
+    //                         name: 'Rekapitulasi Keluhan Berdasarkan Media',
+    //                         href: '/keluhan/2/6',
+    //                         icon: SmileySad,
+    //                         children: [],
+    //                     },
+    //                 ],
+    //             },
+    //         ],
+    //     },
+    //     {
+    //         name: 'Monalisa',
+    //         href: '/monalisa',
+    //         icon: Monitor,
+    //         children: [
+    //             {
+    //                 name: 'Gangguan',
+    //                 icon: Monitor,
+    //                 href: '/monalisa/1',
+    //                 children: [
+    //                     {
+    //                         name: 'Rekapitulasi',
+    //                         href: '/monalisa/1/1',
+    //                         icon: Monitor,
+    //                         children: [
+    //                             {
+    //                                 name: 'Jumlah Kali  Gangguan',
+    //                                 href: '/monalisa/1/1/1',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Recovery Time (RCT) Gangguan',
+    //                                 href: '/monalisa/1/1/2',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Response Time (RPT) Gangguan',
+    //                                 href: '/monalisa/1/1/3',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+    //                                 href: '/monalisa/1/1/4',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Lapor Ulang Gangguan',
+    //                                 href: '/monalisa/1/1/5',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi ENS Gangguan',
+    //                                 href: '/monalisa/1/1/6',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Gangguan Belum Selesai',
+    //                                 href: '/monalisa/1/1/7',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                         ],
+    //                     },
+    //                 ],
+    //             },
+    //             {
+    //                 name: 'Keluhan',
+    //                 icon: Monitor,
+    //                 href: '/monalisa/2',
+    //                 children: [
+    //                     {
+    //                         name: 'Rekapitulasi',
+    //                         href: '/monalisa/2/1',
+    //                         icon: Monitor,
+    //                         children: [
+    //                             {
+    //                                 name: 'Jumlah Kali  Keluhan',
+    //                                 href: '/monalisa/2/1/1',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Recovery Time (RCT) Keluhan',
+    //                                 href: '/monalisa/2/1/2',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Response Time (RPT) Keluhan',
+    //                                 href: '/monalisa/2/1/3',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
+    //                                 href: '/monalisa/2/1/4',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Lapor Ulang Keluhan',
+    //                                 href: '/monalisa/2/1/5',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Rekapitulasi Keluhan Belum Selesai',
+    //                                 href: '/monalisa/2/1/6',
+    //                                 icon: Monitor,
+    //                                 children: [],
+    //                             },
+    //                         ],
+    //                     },
+    //                 ],
+    //             },
+    //             {
+    //                 name: 'Laporan KPI',
+    //                 icon: Monitor,
+    //                 href: '/monalisa/3',
+    //                 children: [
+    //                     {
+    //                         name: 'Bulanan',
+    //                         icon: Monitor,
+    //                         href: '/monalisa/3/1',
+    //                         children: [
+    //                             {
+    //                                 name: 'Penurunan Jumlah Komplain',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/1/1',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Aging Complaint',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/1/2',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Energy Not Sales (ENS)',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/1/3',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/1/4',
+    //                                 children: [],
+    //                             },
+    //                         ],
+    //                     },
+    //                     {
+    //                         name: 'Kumulatif',
+    //                         icon: Monitor,
+    //                         href: '/monalisa/3/2',
+    //                         children: [
+    //                             {
+    //                                 name: 'Penurunan Jumlah Komplain',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/2/1',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Aging Complaint',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/2/2',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Energy Not Sales (ENS)',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/2/3',
+    //                                 children: [],
+    //                             },
+    //                             {
+    //                                 name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+    //                                 icon: Monitor,
+    //                                 href: '/monalisa/3/2/4',
+    //                                 children: [],
+    //                             }
+    //                         ],
+    //                     }
+    //                 ],
+    //             },
+    //         ],
+    //     },
+    //     {
+    //         name: 'Check In Dan Check Out',
+    //         href: '/check-in-out',
+    //         icon: Swap,
+    //         children: [
+    //             {
+    //                 name: 'Laporan Check In /Check Out (CICO)',
+    //                 href: '/check-in-out/1',
+    //                 icon: Swap,
+    //                 children: [
+    //                     {
+    //                         name: 'Laporan Check In /Check Out (CICO)',
+    //                         href: '/check-in-out/1/1',
+    //                         icon: Swap,
+    //                         children: [],
+    //                     },
+    //                 ],
+    //             },
+    //         ],
+    //     },
+    // ]
+    const navigation = ref<MenuItemModel[]>([
         {
             name: 'Gangguan',
             href: '/gangguan',
             icon: LightningSlash,
+            expanded: false,
             children: [
                 {
                     name: 'Daftar',
                     href: '/gangguan/1',
                     icon: LightningSlash,
+                    expanded: false,
                     children: [
                         {
                             name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
                             href: '/gangguan/1/1',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
                             href: '/gangguan/1/2',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Response Time',
                             href: '/gangguan/1/3',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Recovery Time',
                             href: '/gangguan/1/4',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
                             href: '/gangguan/1/5',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Berdasarkan Media',
                             href: '/gangguan/1/6',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Gangguan Diselesaikan Mobile APKT',
                             href: '/gangguan/1/7',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                     ],
@@ -70,89 +529,104 @@ export const useMenuStore = defineStore('menu', () => {
                     name: 'Rekapitulasi',
                     href: '/gangguan/2',
                     icon: LightningSlash,
+                    expanded: false,
                     children: [
                         {
                             name: 'Rekapitulasi Gangguan All',
                             href: '/gangguan/2/1',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
                             href: '/gangguan/2/2',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
                             href: '/gangguan/2/3',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Posko',
                             href: '/gangguan/2/4',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Regu',
                             href: '/gangguan/2/5',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Tanggal',
                             href: '/gangguan/2/6',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Berdasarkan Media',
                             href: '/gangguan/2/7',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Alih  Posko',
                             href: '/gangguan/2/8',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Per Status',
                             href: '/gangguan/2/9',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
                             href: '/gangguan/2/10',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Rating Per Posko',
                             href: '/gangguan/2/11',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Rating Per Regu',
                             href: '/gangguan/2/12',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Koreksi Transaksi Individual',
                             href: '/gangguan/2/13',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Cleansing Transaksi TM',
                             href: '/gangguan/2/14',
                             icon: LightningSlash,
+                            expanded: false,
                             children: [],
                         },
                     ],
@@ -163,52 +637,61 @@ export const useMenuStore = defineStore('menu', () => {
             name: 'Keluhan',
             href: '/keluhan',
             icon: SmileySad,
+            expanded: false,
             children: [
                 {
                     name: 'Daftar',
                     icon: SmileySad,
                     href: '/keluhan/1',
+                    expanded: false,
                     children: [
                         {
                             name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
                             href: '/keluhan/1/1',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
                             href: '/keluhan/1/2',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Response Time',
                             href: '/keluhan/1/3',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Recovery Time',
                             href: '/keluhan/1/4',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
                             href: '/keluhan/1/5',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Berdasarkan Media',
                             href: '/keluhan/1/6',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Daftar Keluhan Selesai di CC123',
                             href: '/keluhan/1/7',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                     ],
@@ -217,41 +700,48 @@ export const useMenuStore = defineStore('menu', () => {
                     name: 'Rekapitulasi',
                     icon: SmileySad,
                     href: '/keluhan/2',
+                    expanded: false,
                     children: [
                         {
                             name: 'Rekapitulasi Keluhan All',
                             href: '/keluhan/2/1',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
                             href: '/keluhan/2/2',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
                             href: '/keluhan/2/3',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Keluhan Per Tanggal',
                             href: '/keluhan/2/4',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Keluhan Per Unit',
                             href: '/keluhan/2/5',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                         {
                             name: 'Rekapitulasi Keluhan Berdasarkan Media',
                             href: '/keluhan/2/6',
                             icon: SmileySad,
+                            expanded: false,
                             children: [],
                         },
                     ],
@@ -262,57 +752,67 @@ export const useMenuStore = defineStore('menu', () => {
             name: 'Monalisa',
             href: '/monalisa',
             icon: Monitor,
+            expanded: false,
             children: [
                 {
                     name: 'Gangguan',
                     icon: Monitor,
                     href: '/monalisa/1',
+                    expanded: false,
                     children: [
                         {
                             name: 'Rekapitulasi',
                             href: '/monalisa/1/1',
                             icon: Monitor,
+                            expanded: false,
                             children: [
                                 {
                                     name: 'Jumlah Kali  Gangguan',
                                     href: '/monalisa/1/1/1',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Recovery Time (RCT) Gangguan',
                                     href: '/monalisa/1/1/2',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Response Time (RPT) Gangguan',
                                     href: '/monalisa/1/1/3',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
                                     href: '/monalisa/1/1/4',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Lapor Ulang Gangguan',
                                     href: '/monalisa/1/1/5',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi ENS Gangguan',
                                     href: '/monalisa/1/1/6',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Gangguan Belum Selesai',
                                     href: '/monalisa/1/1/7',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                             ],
@@ -323,46 +823,54 @@ export const useMenuStore = defineStore('menu', () => {
                     name: 'Keluhan',
                     icon: Monitor,
                     href: '/monalisa/2',
+                    expanded: false,
                     children: [
                         {
                             name: 'Rekapitulasi',
                             href: '/monalisa/2/1',
                             icon: Monitor,
+                            expanded: false,
                             children: [
                                 {
                                     name: 'Jumlah Kali  Keluhan',
                                     href: '/monalisa/2/1/1',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Recovery Time (RCT) Keluhan',
                                     href: '/monalisa/2/1/2',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Response Time (RPT) Keluhan',
                                     href: '/monalisa/2/1/3',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
                                     href: '/monalisa/2/1/4',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Lapor Ulang Keluhan',
                                     href: '/monalisa/2/1/5',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Rekapitulasi Keluhan Belum Selesai',
                                     href: '/monalisa/2/1/6',
                                     icon: Monitor,
+                                    expanded: false,
                                     children: [],
                                 },
                             ],
@@ -373,34 +881,40 @@ export const useMenuStore = defineStore('menu', () => {
                     name: 'Laporan KPI',
                     icon: Monitor,
                     href: '/monalisa/3',
+                    expanded: false,
                     children: [
                         {
                             name: 'Bulanan',
                             icon: Monitor,
                             href: '/monalisa/3/1',
+                            expanded: false,
                             children: [
                                 {
                                     name: 'Penurunan Jumlah Komplain',
                                     icon: Monitor,
                                     href: '/monalisa/3/1/1',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Aging Complaint',
                                     icon: Monitor,
                                     href: '/monalisa/3/1/2',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Energy Not Sales (ENS)',
                                     icon: Monitor,
                                     href: '/monalisa/3/1/3',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                                     icon: Monitor,
                                     href: '/monalisa/3/1/4',
+                                    expanded: false,
                                     children: [],
                                 },
                             ],
@@ -409,29 +923,34 @@ export const useMenuStore = defineStore('menu', () => {
                             name: 'Kumulatif',
                             icon: Monitor,
                             href: '/monalisa/3/2',
+                            expanded: false,
                             children: [
                                 {
                                     name: 'Penurunan Jumlah Komplain',
                                     icon: Monitor,
                                     href: '/monalisa/3/2/1',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Aging Complaint',
                                     icon: Monitor,
                                     href: '/monalisa/3/2/2',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Energy Not Sales (ENS)',
                                     icon: Monitor,
                                     href: '/monalisa/3/2/3',
+                                    expanded: false,
                                     children: [],
                                 },
                                 {
                                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                                     icon: Monitor,
                                     href: '/monalisa/3/2/4',
+                                    expanded: false,
                                     children: [],
                                 }
                             ],
@@ -444,32 +963,57 @@ export const useMenuStore = defineStore('menu', () => {
             name: 'Check In Dan Check Out',
             href: '/check-in-out',
             icon: Swap,
+            expanded: false,
             children: [
                 {
                     name: 'Laporan Check In /Check Out (CICO)',
                     href: '/check-in-out/1',
                     icon: Swap,
+                    expanded: false,
                     children: [
                         {
                             name: 'Laporan Check In /Check Out (CICO)',
                             href: '/check-in-out/1/1',
                             icon: Swap,
+                            expanded: false,
                             children: [],
                         },
                     ],
                 },
             ],
         },
-    ]
+    ])
     const sidebarOpen = ref(false)
     const route = useRoute()
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
 
+    const toggleExpandedByHref = (href: string, newExpanded: boolean): void => {
+        const toggleItemExpanded = (items: MenuItemModel[]): void => {
+            for (const item of items) {
+                if (item.href === href) {
+                    item.expanded = newExpanded
+                } else {
+                    if (newExpanded) {
+                        if (!href.includes(item.href)) {
+                            item.expanded = !newExpanded;
+                        }
+                    }
+                }
+                if (item.children && item.children.length > 0) {
+                    toggleItemExpanded(item.children)
+                }
+            }
+        }
+
+        toggleItemExpanded(navigation.value)
+    }
+
     return {
         navigation,
         toggleSidebar,
         sidebarOpen,
-        menuSelected
+        menuSelected,
+        toggleExpandedByHref
     }
 })
\ No newline at end of file
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index d169c44..d110266 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -2,6 +2,7 @@ interface MenuItemModel {
     name: string;
     href: string;
     icon: any;
+    expanded: boolean;
     children: MenuItemModel[];
 }