85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import { ref, watch } from 'vue';
|
|
import { defineStore } from 'pinia';
|
|
import { useUserStore } from './userStore';
|
|
|
|
export type MenuMode = 'apps' | 'user-settings' | 'admin-settings';
|
|
|
|
export const useLayoutStore = defineStore('layout', () => {
|
|
// Loading state
|
|
const isLoading = ref(false);
|
|
|
|
// Sidebar state - initialize from settings or defaults
|
|
const userStore = useUserStore();
|
|
const sidebarDrawer = ref(userStore.getSetting('sidebar_drawer') ?? true);
|
|
const miniSidebar = ref(userStore.getSetting('mini_sidebar') ?? false);
|
|
const menuMode = ref<MenuMode>('apps');
|
|
|
|
// Theme state - initialize from settings or defaults
|
|
const theme = ref(userStore.getSetting('theme') ?? 'light');
|
|
const font = ref(userStore.getSetting('font') ?? 'Public sans');
|
|
|
|
// Watch and sync sidebar state to settings
|
|
watch(sidebarDrawer, (value) => {
|
|
userStore.setSetting('sidebar_drawer', value);
|
|
});
|
|
|
|
watch(miniSidebar, (value) => {
|
|
userStore.setSetting('mini_sidebar', value);
|
|
});
|
|
|
|
watch(theme, (value) => {
|
|
userStore.setSetting('theme', value);
|
|
});
|
|
|
|
watch(font, (value) => {
|
|
userStore.setSetting('font', value);
|
|
});
|
|
|
|
// Actions
|
|
function toggleSidebarDrawer() {
|
|
sidebarDrawer.value = !sidebarDrawer.value;
|
|
}
|
|
|
|
function setMiniSidebar(value: boolean) {
|
|
miniSidebar.value = value;
|
|
}
|
|
|
|
function setTheme(value: string) {
|
|
theme.value = value;
|
|
}
|
|
|
|
function setFont(value: string) {
|
|
font.value = value;
|
|
}
|
|
|
|
function setMenuMode(value: MenuMode) {
|
|
menuMode.value = value;
|
|
}
|
|
|
|
function toggleMenuMode() {
|
|
// Cycle through: apps -> user-settings -> admin-settings -> apps
|
|
const modes: MenuMode[] = ['apps', 'user-settings', 'admin-settings'];
|
|
const currentIndex = modes.indexOf(menuMode.value);
|
|
const nextIndex = (currentIndex + 1) % modes.length;
|
|
menuMode.value = modes[nextIndex];
|
|
}
|
|
|
|
return {
|
|
// State
|
|
isLoading,
|
|
sidebarDrawer,
|
|
miniSidebar,
|
|
menuMode,
|
|
theme,
|
|
font,
|
|
|
|
// Actions
|
|
toggleSidebarDrawer,
|
|
setMiniSidebar,
|
|
setMenuMode,
|
|
toggleMenuMode,
|
|
setTheme,
|
|
setFont
|
|
};
|
|
});
|