refactor

src/layout/AppConfig.vue

@@ -10,7 +10,6 @@ const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
 const onConfigButtonClick = () => {
     visible.value = !visible.value;
 };
-
 const onChangeTheme = (theme, mode) => {
     const elementId = 'theme-css';
     const linkElement = document.getElementById(elementId);
@@ -26,12 +25,10 @@ const onChangeTheme = (theme, mode) => {
 
     changeThemeSettings(theme, mode === 'dark');
 };
-
 const decrementScale = () => {
     setScale(layoutConfig.scale.value - 1);
     applyScale();
 };
-
 const incrementScale = () => {
     setScale(layoutConfig.scale.value + 1);
     applyScale();

src/layout/AppMenu.vue

@@ -157,17 +157,12 @@ const model = ref([
         ]
     }
 ]);
-
-function test(e) {
-    console.log('test');
-    console.log(e);
-}
 </script>
 
 <template>
     <ul class="layout-menu">
         <template v-for="(item, i) in model" :key="item">
-            <app-menu-item @submenu:opened="test" v-if="!item.separator" :item="item" :index="i"></app-menu-item>
+            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
             <li v-if="item.separator" class="menu-separator"></li>
         </template>
         <li>

src/layout/AppMenuItem.vue

@@ -28,11 +28,15 @@ const props = defineProps({
 
 const isActiveMenu = ref(false);
 const itemKey = ref(null);
+
 onBeforeMount(() => {
     itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
 
-    isActiveMenu.value = layoutConfig.activeMenuItem.value === itemKey.value || layoutConfig.activeMenuItem?.value?.startsWith(itemKey.value + '-');
+    const activeItem = layoutState.activeMenuItem;
+
+    isActiveMenu.value = activeItem === itemKey.value || activeItem ? activeItem.startsWith(itemKey.value + '-') : false;
 });
+
 watch(
     () => layoutConfig.activeMenuItem.value,
     (newVal) => {
@@ -45,16 +49,19 @@ const itemClick = (event, item) => {
         return;
     }
 
-    if ((item.to || item.url) && (layoutState.staticMenuMobileActive.value || layoutState.overlayMenuActive.value)) {
+    const { overlayMenuActive, staticMenuMobileActive } = layoutState;
+
+    if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
         onMenuToggle();
     }
-    //execute command
+
     if (item.command) {
         item.command({ originalEvent: event, item: item });
     }
 
-    if (item.items) setActiveMenuItem(isActiveMenu.value ? props.parentItemKey : itemKey);
-    else setActiveMenuItem(itemKey.value);
+    const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
+
+    setActiveMenuItem(foundItemKey);
 };
 
 const checkActiveRoute = (item) => {