Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5a0500d7b4 |
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useLayoutStore, type MenuMode } from '@KTXC/stores/layoutStore';
|
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
||||||
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
|
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
|
||||||
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';
|
||||||
@@ -25,12 +25,33 @@ const menuEntries = computed(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Static list of menu modes shown as icon buttons
|
// Menu mode display info
|
||||||
const menuModes = computed((): Array<{ value: MenuMode; icon: string; label: string }> => [
|
const menuModeInfo = computed(() => {
|
||||||
{ value: 'apps', icon: 'mdi-view-dashboard', label: t('systemMenu.apps', 'Applications') },
|
switch (layoutStore.menuMode) {
|
||||||
{ value: 'user-settings', icon: 'mdi-account-cog', label: t('systemMenu.personalSettings', 'Settings') },
|
case 'user-settings':
|
||||||
{ value: 'admin-settings', icon: 'mdi-shield-crown', label: t('systemMenu.adminSettings', 'System') },
|
return {
|
||||||
]);
|
icon: 'mdi-account-cog',
|
||||||
|
label: t('systemMenu.personalSettings', 'Settings'),
|
||||||
|
toggleLabel: t('systemMenu.adminSettings', 'System'),
|
||||||
|
toggleIcon: 'mdi-shield-crown',
|
||||||
|
};
|
||||||
|
case 'admin-settings':
|
||||||
|
return {
|
||||||
|
icon: 'mdi-shield-crown',
|
||||||
|
label: t('systemMenu.adminSettings', 'System'),
|
||||||
|
toggleLabel: t('systemMenu.apps', 'Applications'),
|
||||||
|
toggleIcon: 'mdi-view-dashboard',
|
||||||
|
};
|
||||||
|
case 'apps':
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
icon: 'mdi-view-dashboard',
|
||||||
|
label: t('systemMenu.apps', 'Applications'),
|
||||||
|
toggleLabel: t('systemMenu.userSettings', 'Settings'),
|
||||||
|
toggleIcon: 'mdi-account-cog',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -82,74 +103,20 @@ export default {
|
|||||||
</v-list>
|
</v-list>
|
||||||
</perfect-scrollbar>
|
</perfect-scrollbar>
|
||||||
|
|
||||||
<!-- Menu Mode Switcher -->
|
<!-- Menu Mode Toggle -->
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<div class="menu-mode-switcher d-flex justify-space-around align-center py-2">
|
<v-list density="compact" class="pa-2">
|
||||||
<v-tooltip
|
<v-list-item
|
||||||
v-for="mode in menuModes"
|
rounded
|
||||||
:key="mode.value"
|
color="primary"
|
||||||
location="right"
|
@click="layoutStore.toggleMenuMode()"
|
||||||
|
:prepend-icon="menuModeInfo.toggleIcon"
|
||||||
|
class="menu-mode-toggle"
|
||||||
>
|
>
|
||||||
<template v-slot:activator="{ props }">
|
<v-list-item-title class="text-body-2">{{ menuModeInfo.toggleLabel }}</v-list-item-title>
|
||||||
<v-btn
|
</v-list-item>
|
||||||
v-bind="props"
|
</v-list>
|
||||||
icon
|
|
||||||
variant="text"
|
|
||||||
density="comfortable"
|
|
||||||
:color="layoutStore.menuMode === mode.value ? 'primary' : undefined"
|
|
||||||
: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>
|
|
||||||
</template>
|
|
||||||
<span>{{ mode.label }}</span>
|
|
||||||
</v-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.menu-mode-btn {
|
|
||||||
opacity: 0.6;
|
|
||||||
transition: opacity 0.2s ease, background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-mode-btn:hover {
|
|
||||||
opacity: 1;
|
|
||||||
background-color: rgba(var(--v-theme-on-surface), 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-mode-btn--active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collapsed rail: only the active mode icon fits without crowding */
|
|
||||||
.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .menu-mode-switcher {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .menu-mode-btn:not(.menu-mode-btn--active) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sub-menu items: Vuetify's default group indent (prepend width + indent
|
|
||||||
size) stacks up to ~72px; bring it back down closer to top-level items */
|
|
||||||
.scrollnavbar :deep(.v-list-group__items .v-list-item) {
|
|
||||||
padding-inline-start: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collapsed rail (not hovering): sub-items have no room to show icon or
|
|
||||||
text, so they render as an empty highlighted bar when active. Hide the
|
|
||||||
expanded group entirely and highlight the parent icon instead. */
|
|
||||||
.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) :deep(.v-list-group__items) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leftSidebar.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering)
|
|
||||||
:deep(.v-list-group:has(.v-list-item--active) > .v-list-item.v-list-group__header) {
|
|
||||||
color: rgb(var(--v-theme-primary));
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user