From 3efe7ae222ae36723890ce0b16e63a0ded009f8e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 29 Jul 2024 16:01:14 +0300
Subject: [PATCH] Use readonly for layout composable

---
 src/layout/AppConfigurator.vue   | 16 ++++++++--------
 src/layout/AppFooter.vue         |  4 ++--
 src/layout/AppLayout.vue         | 20 +++++++++-----------
 src/layout/AppMenuItem.vue       | 10 ++++------
 src/layout/AppTopbar.vue         |  6 +++---
 src/layout/composables/layout.js | 10 ++++++++--
 src/views/pages/Landing.vue      |  4 ++--
 src/views/pages/auth/Login.vue   |  6 +++---
 8 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/layout/AppConfigurator.vue b/src/layout/AppConfigurator.vue
index 2e6a909..e4a3a27 100644
--- a/src/layout/AppConfigurator.vue
+++ b/src/layout/AppConfigurator.vue
@@ -8,6 +8,8 @@ import { ref } from 'vue';
 
 const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
 
+const preset = ref(layoutConfig.preset);
+
 const presets = {
     Aura,
     Lara,
@@ -72,7 +74,7 @@ const surfaces = ref([
 ]);
 
 function getPresetExt() {
-    const color = primaryColors.value.find((c) => c.name === layoutConfig.primary.value);
+    const color = primaryColors.value.find((c) => c.name === layoutConfig.primary);
 
     if (color.name === 'noir') {
         return {
@@ -123,7 +125,7 @@ function getPresetExt() {
             }
         };
     } else {
-        if (layoutConfig.preset.value === 'Nora') {
+        if (layoutConfig.preset === 'Nora') {
             return {
                 semantic: {
                     primary: color.palette,
@@ -215,14 +217,12 @@ function applyTheme(type, color) {
     } else if (type === 'surface') {
         updateSurfacePalette(color.palette);
     }
-
-    /*EventBus.emit('theme-palette-change');*/
 }
 
 function onPresetChange(value) {
     setPreset(value);
     const presetValue = presets[value];
-    const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface.value)?.palette;
+    const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;
 
     $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
 }
@@ -240,7 +240,7 @@ function onPresetChange(value) {
                         type="button"
                         :title="primaryColor.name"
                         @click="updateColors('primary', primaryColor)"
-                        :class="{ 'active-color': layoutConfig.primary.value === primaryColor.name }"
+                        :class="{ 'active-color': layoutConfig.primary === primaryColor.name }"
                         :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
                     ></button>
                 </div>
@@ -254,14 +254,14 @@ function onPresetChange(value) {
                         type="button"
                         :title="surface.name"
                         @click="updateColors('surface', surface)"
-                        :class="{ 'active-color': layoutConfig.surface.value ? layoutConfig.surface.value === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                        :class="{ 'active-color': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
                         :style="{ backgroundColor: `${surface.palette['500']}` }"
                     ></button>
                 </div>
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="layoutConfig.preset.value" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
+                <SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
             </div>
         </div>
     </div>
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 50818e6..bfceb22 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -2,10 +2,10 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 
-const { layoutConfig } = useLayout();
+const { isDarkTheme } = useLayout();
 
 const logoUrl = computed(() => {
-    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 076aa57..4e46dda 100644
--- a/src/layout/AppLayout.vue
+++ b/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 } = useLayout();
+const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
 
 const outsideClickListener = ref(null);
 
@@ -19,22 +19,20 @@ watch(isSidebarActive, (newVal) => {
 
 const containerClass = computed(() => {
     return {
-        'layout-theme-light': !layoutConfig.darkTheme.value,
-        'layout-theme-dark': layoutConfig.darkTheme.value,
-        'layout-overlay': layoutConfig.menuMode.value === 'overlay',
-        'layout-static': layoutConfig.menuMode.value === 'static',
-        'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
-        'layout-overlay-active': layoutState.overlayMenuActive.value,
-        'layout-mobile-active': layoutState.staticMenuMobileActive.value
+        'layout-theme-light': !layoutConfig.darkTheme,
+        'layout-theme-dark': layoutConfig.darkTheme,
+        'layout-overlay': layoutConfig.menuMode === 'overlay',
+        'layout-static': layoutConfig.menuMode === 'static',
+        'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
+        'layout-overlay-active': layoutState.overlayMenuActive,
+        'layout-mobile-active': layoutState.staticMenuMobileActive
     };
 });
 const bindOutsideClickListener = () => {
     if (!outsideClickListener.value) {
         outsideClickListener.value = (event) => {
             if (isOutsideClicked(event)) {
-                layoutState.overlayMenuActive.value = false;
-                layoutState.staticMenuMobileActive.value = false;
-                layoutState.menuHoverActive.value = false;
+                resetMenu();
             }
         };
         document.addEventListener('click', outsideClickListener.value);
diff --git a/src/layout/AppMenuItem.vue b/src/layout/AppMenuItem.vue
index d2eaad4..62754ae 100644
--- a/src/layout/AppMenuItem.vue
+++ b/src/layout/AppMenuItem.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onBeforeMount, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import { useLayout } from '@/layout/composables/layout';
+import { onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
@@ -38,7 +38,7 @@ onBeforeMount(() => {
 });
 
 watch(
-    () => layoutConfig.activeMenuItem.value,
+    () => layoutConfig.activeMenuItem,
     (newVal) => {
         isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
     }
@@ -49,9 +49,7 @@ const itemClick = (event, item) => {
         return;
     }
 
-    const { overlayMenuActive, staticMenuMobileActive } = layoutState;
-
-    if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
+    if ((item.to || item.url) && (layoutState.staticMenuMobileActive || layoutState.overlayMenuActive)) {
         onMenuToggle();
     }
 
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 9347e8c..ac75668 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import AppConfigurator from './AppConfigurator.vue';
 
-const { layoutConfig, onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
+const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
@@ -19,7 +19,7 @@ onBeforeUnmount(() => {
 });
 
 const logoUrl = computed(() => {
-    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
 const onTopBarMenuButton = () => {
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index 8af1982..0241f7b 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -1,4 +1,4 @@
-import { computed, reactive, toRefs } from 'vue';
+import { computed, reactive, readonly } from 'vue';
 
 const layoutConfig = reactive({
     preset: 'Aura',
@@ -52,9 +52,15 @@ 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);
 
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
+    return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu };
 }
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index 64ae2b8..6d4996c 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -2,7 +2,7 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 
-const { layoutConfig } = useLayout();
+const { isDarkTheme } = useLayout();
 
 const smoothScroll = (id) => {
     document.querySelector(id).scrollIntoView({
@@ -11,7 +11,7 @@ const smoothScroll = (id) => {
 };
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index 5ef29f7..a665c95 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -1,14 +1,14 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
-import { ref, computed } from 'vue';
+import { computed, ref } from 'vue';
 
-const { layoutConfig } = useLayout();
+const { isDarkTheme } = useLayout();
 const email = ref('');
 const password = ref('');
 const checked = ref(false);
 
 const logoUrl = computed(() => {
-    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>