121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
|
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
|
|
import Logo from '@KTXC/layouts/logo/LogoDark.vue';
|
|
import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
|
|
import SystemMenuGroupDynamic from './LayoutSystemMenuGroupDynamic.vue';
|
|
import SystemMenuItem from './LayoutSystemMenuItem.vue';
|
|
|
|
const layoutStore = useLayoutStore();
|
|
const integrationStore = useIntegrationStore();
|
|
|
|
// Get all entries based on current menu mode
|
|
const menuEntries = computed(() => {
|
|
switch (layoutStore.menuMode) {
|
|
case 'user-settings':
|
|
return integrationStore.getPoint('user_settings_menu');
|
|
case 'admin-settings':
|
|
return integrationStore.getPoint('admin_settings_menu');
|
|
case 'apps':
|
|
default:
|
|
return integrationStore.getPoint('app_menu');
|
|
}
|
|
});
|
|
|
|
// Menu mode display info
|
|
const menuModeInfo = computed(() => {
|
|
switch (layoutStore.menuMode) {
|
|
case 'user-settings':
|
|
return {
|
|
icon: 'mdi-account-cog',
|
|
label: 'Personal Settings',
|
|
toggleLabel: 'Admin',
|
|
toggleIcon: 'mdi-shield-crown',
|
|
};
|
|
case 'admin-settings':
|
|
return {
|
|
icon: 'mdi-shield-crown',
|
|
label: 'Administration',
|
|
toggleLabel: 'Apps',
|
|
toggleIcon: 'mdi-view-dashboard',
|
|
};
|
|
case 'apps':
|
|
default:
|
|
return {
|
|
icon: 'mdi-view-dashboard',
|
|
label: 'Applications',
|
|
toggleLabel: 'Settings',
|
|
toggleIcon: 'mdi-account-cog',
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
methods: {
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer
|
|
left
|
|
v-model="layoutStore.sidebarDrawer"
|
|
elevation="0"
|
|
rail-width="60"
|
|
mobile-breakpoint="lg"
|
|
app
|
|
class="leftSidebar"
|
|
:rail="layoutStore.miniSidebar"
|
|
expand-on-hover
|
|
>
|
|
<div class="pa-5">
|
|
<Logo />
|
|
</div>
|
|
<!-- ---------------------------------------------- -->
|
|
<!---Navigation -->
|
|
<!-- ---------------------------------------------- -->
|
|
<perfect-scrollbar class="scrollnavbar">
|
|
<v-list aria-busy="true" aria-label="menu list">
|
|
<!---Menu Loop -->
|
|
<template v-for="entry in menuEntries" :key="entry.id">
|
|
<!-- Group with dynamic style (collapsible) -->
|
|
<SystemMenuGroupDynamic
|
|
v-if="'items' in entry && entry.style === 'dynamic'"
|
|
class="leftPadding"
|
|
:group="entry"
|
|
/>
|
|
<!-- Group with static style (subheader) -->
|
|
<SystemMenuGroupStatic
|
|
v-else-if="'items' in entry"
|
|
:group="entry"
|
|
/>
|
|
<!-- Single item (no group) -->
|
|
<SystemMenuItem
|
|
v-else
|
|
:item="entry"
|
|
/>
|
|
</template>
|
|
</v-list>
|
|
</perfect-scrollbar>
|
|
|
|
<!-- Menu Mode Toggle -->
|
|
<template v-slot:append>
|
|
<v-divider />
|
|
<v-list density="compact" class="pa-2">
|
|
<v-list-item
|
|
rounded
|
|
color="primary"
|
|
@click="layoutStore.toggleMenuMode()"
|
|
:prepend-icon="menuModeInfo.toggleIcon"
|
|
class="menu-mode-toggle"
|
|
>
|
|
<v-list-item-title class="text-body-2">{{ menuModeInfo.toggleLabel }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
</template>
|