Nodarx/server
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Projects Releases Activity

fix: only sxhow menu section when there are items

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-08-09 23:12:47 -04:00
parent a4c467d54e
commit 4f5ea8c442
2 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/src/layouts/menus/LayoutSystemMenu.vue
+50 -39
View File
@@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed, watch } from 'vue';
import { useLayoutStore, type MenuMode } from '@KTXC/stores/layoutStore'; import { useLayoutStore, type MenuMode } from '@KTXC/stores/layoutStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore'; import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import type { IntegrationPointType } from '@KTXC/types/integrationTypes';
import { useL10n } from '@KTXC/composables/useL10n'; import { useL10n } from '@KTXC/composables/useL10n';
import Logo from '@KTXC/layouts/logo/LogoDark.vue'; import Logo from '@KTXC/layouts/logo/LogoDark.vue';
import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue'; import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
@@ -12,25 +13,33 @@ const layoutStore = useLayoutStore();
const integrationStore = useIntegrationStore(); const integrationStore = useIntegrationStore();
const { t } = useL10n('core'); const { t } = useL10n('core');
const menuPointByMode: Record<MenuMode, IntegrationPointType> = {
apps: 'app_menu',
'user-settings': 'user_settings_menu',
'admin-settings': 'admin_settings_menu',
};
// Get all entries based on current menu mode // Get all entries based on current menu mode
const menuEntries = computed(() => { const menuEntries = computed(() => integrationStore.getPoint(menuPointByMode[layoutStore.menuMode]));
switch (layoutStore.menuMode) {
case 'user-settings': // Only show menu modes that currently have visible items.
return integrationStore.getPoint('user_settings_menu'); const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => {
case 'admin-settings': const modes: Array<{ value: MenuMode; icon: string; label: string }> = [
return integrationStore.getPoint('admin_settings_menu'); { value: 'apps', icon: 'mdi-view-dashboard', label: t('systemMenu.apps', 'Applications') },
case 'apps': { value: 'user-settings', icon: 'mdi-account-cog', label: t('systemMenu.personalSettings', 'Settings') },
default: { value: 'admin-settings', icon: 'mdi-shield-crown', label: t('systemMenu.adminSettings', 'System') },
return integrationStore.getPoint('app_menu'); ];
}
return modes.filter(mode => integrationStore.getPoint(menuPointByMode[mode.value]).length > 0);
}); });
// Static list of menu modes shown as icon buttons // If the active menu becomes empty (for example, after a module is disabled),
const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => [ // move to the first menu that still has content.
{ value: 'apps', icon: 'mdi-view-dashboard', label: t('systemMenu.apps', 'Applications') }, watch(menuModes, (availableModes) => {
{ value: 'user-settings', icon: 'mdi-account-cog', label: t('systemMenu.personalSettings', 'Settings') }, if (availableModes.length > 0 && !availableModes.some(mode => mode.value === layoutStore.menuMode)) {
{ value: 'admin-settings', icon: 'mdi-shield-crown', label: t('systemMenu.adminSettings', 'System') }, layoutStore.setMenuMode(availableModes[0].value);
]); }
}, { immediate: true });
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -84,28 +93,30 @@ export default {
<!-- Menu Mode Switcher --> <!-- Menu Mode Switcher -->
<template v-slot:append> <template v-slot:append>
<v-divider /> <div v-if="menuModes.length">
<div class="menu-mode-switcher d-flex justify-space-around align-center py-2"> <v-divider />
<v-tooltip <div class="menu-mode-switcher d-flex justify-space-around align-center py-2">
v-for="mode in menuModes" <v-tooltip
:key="mode.value" v-for="mode in menuModes"
location="right" :key="mode.value"
> location="right"
<template v-slot:activator="{ props }"> >
<v-btn <template v-slot:activator="{ props }">
v-bind="props" <v-btn
icon v-bind="props"
variant="text" icon
density="comfortable" variant="text"
:color="layoutStore.menuMode === mode.value ? 'primary' : undefined" density="comfortable"
:class="['menu-mode-btn', { 'menu-mode-btn--active': layoutStore.menuMode === mode.value }]" :color="layoutStore.menuMode === mode.value ? 'primary' : undefined"
@click="layoutStore.setMenuMode(mode.value)" :class="['menu-mode-btn', { 'menu-mode-btn--active': layoutStore.menuMode === mode.value }]"
> @click="layoutStore.setMenuMode(mode.value)"
<v-icon>{{ mode.icon }}</v-icon> >
</v-btn> <v-icon>{{ mode.icon }}</v-icon>
</template> </v-btn>
<span>{{ mode.label }}</span> </template>
</v-tooltip> <span>{{ mode.label }}</span>
</v-tooltip>
</div>
</div> </div>
</template> </template>
</v-navigation-drawer> </v-navigation-drawer>
core/src/stores/integrationStore.ts
+4
View File
@@ -156,6 +156,10 @@ export const useIntegrationStore = defineStore('integrationStore', {
return Array.from(point.items.values()) return Array.from(point.items.values())
.filter(entry => entry.visible !== false) .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)); .sort((a, b) => (a.priority ?? 100) - (b.priority ?? 100));
}, },