fix: only sxhow menu section when there are items

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

core/src/layouts/menus/LayoutSystemMenu.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useLayoutStore, type MenuMode } from '@KTXC/stores/layoutStore';
 import { useIntegrationStore } from '@KTXC/stores/integrationStore';
+import type { IntegrationPointType } from '@KTXC/types/integrationTypes';
 import { useL10n } from '@KTXC/composables/useL10n';
 import Logo from '@KTXC/layouts/logo/LogoDark.vue';
 import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
@@ -12,25 +13,33 @@ const layoutStore = useLayoutStore();
 const integrationStore = useIntegrationStore();
 const { t } = useL10n('core');
 
-// Get all entries based on current menu mode
+const menuPointByMode: Record<MenuMode, IntegrationPointType> = {
-const menuEntries = computed(() => {
+  apps: 'app_menu',
-  switch (layoutStore.menuMode) {
+  'user-settings': 'user_settings_menu',
-    case 'user-settings':
+  'admin-settings': 'admin_settings_menu',
-      return integrationStore.getPoint('user_settings_menu');
+};
-    case 'admin-settings':
-      return integrationStore.getPoint('admin_settings_menu');
-    case 'apps':
-    default:
-      return integrationStore.getPoint('app_menu');
-  }
-});
 
-// Static list of menu modes shown as icon buttons
+// Get all entries based on current menu mode
-const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => [
+const menuEntries = computed(() => integrationStore.getPoint(menuPointByMode[layoutStore.menuMode]));
+
+// Only show menu modes that currently have visible items.
+const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => {
+  const modes: Array<{ value: MenuMode; icon: string; label: string }> = [
     { value: 'apps', icon: 'mdi-view-dashboard', label: t('systemMenu.apps', 'Applications') },
     { value: 'user-settings', icon: 'mdi-account-cog', label: t('systemMenu.personalSettings', 'Settings') },
     { value: 'admin-settings', icon: 'mdi-shield-crown', label: t('systemMenu.adminSettings', 'System') },
-]);
+  ];
+
+  return modes.filter(mode => integrationStore.getPoint(menuPointByMode[mode.value]).length > 0);
+});
+
+// If the active menu becomes empty (for example, after a module is disabled),
+// move to the first menu that still has content.
+watch(menuModes, (availableModes) => {
+  if (availableModes.length > 0 && !availableModes.some(mode => mode.value === layoutStore.menuMode)) {
+    layoutStore.setMenuMode(availableModes[0].value);
+  }
+}, { immediate: true });
 </script>
 
 <script lang="ts">
@@ -84,6 +93,7 @@ export default {
     
     <!-- Menu Mode Switcher -->
     <template v-slot:append>
+      <div v-if="menuModes.length">
         <v-divider />
         <div class="menu-mode-switcher d-flex justify-space-around align-center py-2">
           <v-tooltip
@@ -107,6 +117,7 @@ export default {
             <span>{{ mode.label }}</span>
           </v-tooltip>
         </div>
+      </div>
     </template>
   </v-navigation-drawer>
 </template>

core/src/stores/integrationStore.ts

@@ -156,6 +156,10 @@ export const useIntegrationStore = defineStore('integrationStore', {
       
       return Array.from(point.items.values())
         .filter(entry => entry.visible !== false)
+        .map(entry => 'items' in entry
+          ? { ...entry, items: entry.items.filter(item => item.visible !== false) }
+          : entry)
+        .filter(entry => !('items' in entry) || entry.items.length > 0)
         .sort((a, b) => (a.priority ?? 100) - (b.priority ?? 100));
     },