Layout composable changes

src/layout/AppConfigurator.vue

@@ -5,7 +5,7 @@ import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
 import { ref } from 'vue';
 
-const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
+const { layoutConfig, isDarkTheme } = useLayout();
 
 const presets = {
     Aura,
@@ -167,9 +167,9 @@ function getPresetExt() {
 
 function updateColors(type, color) {
     if (type === 'primary') {
-        setPrimary(color.name);
+        layoutConfig.primary = color.name;
     } else if (type === 'surface') {
-        setSurface(color.name);
+        layoutConfig.surface = color.name;
     }
 
     applyTheme(type, color);
@@ -184,7 +184,7 @@ function applyTheme(type, color) {
 }
 
 function onPresetChange() {
-    setPreset(preset.value);
+    layoutConfig.preset = preset.value;
     const presetValue = presets[preset.value];
     const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;
 
@@ -192,7 +192,7 @@ function onPresetChange() {
 }
 
 function onMenuModeChange() {
-    setMenuMode(menuMode.value);
+    layoutConfig.menuMode = menuMode.value;
 }
 </script>
 

src/layout/AppLayout.vue

@@ -5,7 +5,7 @@ import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 
-const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
+const { layoutConfig, layoutState, isSidebarActive } = useLayout();
 
 const outsideClickListener = ref(null);
 
@@ -31,7 +31,9 @@ function bindOutsideClickListener() {
     if (!outsideClickListener.value) {
         outsideClickListener.value = (event) => {
             if (isOutsideClicked(event)) {
-                resetMenu();
+                layoutState.overlayMenuActive = false;
+                layoutState.staticMenuMobileActive = false;
+                layoutState.menuHoverActive = false;
             }
         };
         document.addEventListener('click', outsideClickListener.value);

src/layout/AppMenuItem.vue

@@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const { layoutState, setActiveMenuItem, onMenuToggle } = useLayout();
+const { layoutState, setActiveMenuItem, toggleMenu } = useLayout();
 
 const props = defineProps({
     item: {
@@ -51,7 +51,7 @@ function itemClick(event, item) {
     }
 
     if ((item.to || item.url) && (layoutState.staticMenuMobileActive || layoutState.overlayMenuActive)) {
-        onMenuToggle();
+        toggleMenu();
     }
 
     if (item.command) {

src/layout/AppTopbar.vue

@@ -2,13 +2,13 @@
 import { useLayout } from '@/layout/composables/layout';
 import AppConfigurator from './AppConfigurator.vue';
 
-const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
+const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
 </script>
 
 <template>
     <div class="layout-topbar">
         <div class="layout-topbar-logo-container">
-            <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
+            <button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
                 <i class="pi pi-bars"></i>
             </button>
             <router-link to="/" class="layout-topbar-logo">

src/layout/composables/layout.js

@@ -1,4 +1,4 @@
-import { computed, reactive, readonly } from 'vue';
+import { computed, reactive } from 'vue';
 
 const layoutConfig = reactive({
     preset: 'Aura',
@@ -19,26 +19,10 @@ const layoutState = reactive({
 });
 
 export function useLayout() {
-    const setPrimary = (value) => {
-        layoutConfig.primary = value;
-    };
-
-    const setSurface = (value) => {
-        layoutConfig.surface = value;
-    };
-
-    const setPreset = (value) => {
-        layoutConfig.preset = value;
-    };
-
     const setActiveMenuItem = (item) => {
         layoutState.activeMenuItem = item.value || item;
     };
 
-    const setMenuMode = (mode) => {
-        layoutConfig.menuMode = mode;
-    };
-
     const toggleDarkMode = () => {
         if (!document.startViewTransition) {
             executeDarkModeToggle();
@@ -54,7 +38,7 @@ export function useLayout() {
         document.documentElement.classList.toggle('app-dark');
     };
 
-    const onMenuToggle = () => {
+    const toggleMenu = () => {
         if (layoutConfig.menuMode === 'overlay') {
             layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
         }
@@ -66,12 +50,6 @@ export function useLayout() {
         }
     };
 
-    const resetMenu = () => {
-        layoutState.overlayMenuActive = false;
-        layoutState.staticMenuMobileActive = false;
-        layoutState.menuHoverActive = false;
-    };
-
     const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
@@ -80,5 +58,15 @@ export function useLayout() {
 
     const getSurface = computed(() => layoutConfig.surface);
 
-    return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, getSurface, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu, setMenuMode };
+    return {
+        layoutConfig,
+        layoutState,
+        toggleMenu,
+        isSidebarActive,
+        isDarkTheme,
+        getPrimary,
+        getSurface,
+        setActiveMenuItem,
+        toggleDarkMode
+    };
 }