Initial Version

core/src/stores/layoutStore.ts

@@ -0,0 +1,85 @@
+import { ref, watch } from 'vue';
+import { defineStore } from 'pinia';
+import config from '@KTXC/config';
+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 config
+  const userStore = useUserStore();
+  const sidebarDrawer = ref(userStore.getSetting('sidebar_drawer') ?? config.Sidebar_drawer);
+  const miniSidebar = ref(userStore.getSetting('mini_sidebar') ?? config.mini_sidebar);
+  const menuMode = ref<MenuMode>('apps');
+
+  // Theme state - initialize from settings or config
+  const theme = ref(userStore.getSetting('theme') ?? config.actTheme);
+  const font = ref(userStore.getSetting('font') ?? config.fontTheme);
+
+  // 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
+  };
+});