fix dialog command palettes error

src/App.vue

@@ -4,12 +4,7 @@ import { NotificationProvider } from '@/components/Notification'
 import { useDialogStore } from '@/stores/dialog'
 import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
 import CommandPalettes from '@/components/CommandPalettes.vue'
-import { onMounted } from 'vue'
 const dialog = useDialogStore()
-
-onMounted(() => {
-  // remove all local storage
-})
 </script>
 
 <template>

src/components/CommandPalettes.vue

@@ -1,13 +1,13 @@
 <template>
-    <TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
+    <TransitionRoot :show="command.open" @after-leave="onQueryChange('')" appear>
         <Dialog as="div" class="relative z-10" @close="command.closeCommand">
-            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+            <TransitionChild enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                 leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                 <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
             </TransitionChild>
 
             <div class="fixed inset-0 z-10 p-4 overflow-y-auto sm:p-6 md:p-20">
-                <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
+                <TransitionChild enter="ease-out duration-300" enter-from="opacity-0 scale-95"
                     enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
                     leave-to="opacity-0 scale-95">
                     <!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
@@ -130,7 +130,6 @@
                             </ComboboxOptions>
 
                             <div v-if="query !== '' && filteredMenus.length === 0" class="px-6 text-center py-14 sm:px-14">
-                                <!-- <FolderIcon class="w-6 h-6 mx-auto text-gray-900 text-opacity-40" aria-hidden="true" /> -->
                                 <h2 class="font-semibold text-slate-900">Tidak ada hasil</h2>
 
                                 <p class="mt-2 text-sm leading-6 text-slate-600">

src/components/Navigation/Aside/AsideMenuMultiple.vue

@@ -33,8 +33,7 @@ const isMenuSelected = computed(() => {
 
 <template>
     <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
-        <Disclosure :defaultOpen="item.expanded" as="dev">
-            <!-- Nested item with children -->
+        <Disclosure :defaultOpen="item.expanded">
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
                 :class="[(isMenuSelected || item.expanded || isChildren) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
                 <component v-if="isChildren" :is="IconDotOutline"

src/stores/command.ts

@@ -13,11 +13,7 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
     const keyFStatus = ref(false)
 
     const showCommandPalettes = () => {
-        open.value = true;
-    }
-
-    const handleOnDismissCommandPalettes = () => {
-        open.value = false;
+        open.value = true
     }
 
     const onKeyPressed = (event: KeyboardEvent) => {
@@ -100,7 +96,6 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
     return {
         open,
         showCommandPalettes,
-        handleOnDismissCommandPalettes,
         onKeyPressed,
         onKeyUp,
         addRecent,

src/stores/menu.ts

@@ -39,6 +39,11 @@ export const useMenuStore = defineStore('menu', () => {
         toggleItemExpanded(navigation.value)
     }
     const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
+    const collapseAllMenu = (): void => {
+        for (const item of navigation.value) {
+            item.expanded = false
+        }
+    }
 
     watch(menuSelected, (value) => {
         if (value !== '/login' && value !== '/404' && value !== '/home' && value !== '/') {
@@ -50,11 +55,7 @@ export const useMenuStore = defineStore('menu', () => {
                 }
             }
         } else {
-            if (value === '/' || value === '/home') {
-                for (const item of navigation.value) {
-                    item.expanded = false
-                }
-            }
+            collapseAllMenu()
         }
     })
 
@@ -75,6 +76,7 @@ export const useMenuStore = defineStore('menu', () => {
     }
 
     return {
+        collapseAllMenu,
         expandCurrentActiveMenu,
         navigation,
         toggleSidebar,