From e0fb57a255607a32d34e85b56e6aff8b356ab452 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 3 Nov 2022 01:06:33 +0300
Subject: [PATCH] layoutService label changes. AppLayout fixes

---
 .../{theme.js => layoutService.js}            | 26 ++++-----
 src/layout/AppConfig.vue                      | 30 +++++------
 src/layout/AppFooter.vue                      |  6 +--
 src/layout/AppLayout.vue                      | 54 +++++++++++++++----
 src/layout/AppTopbar.vue                      |  6 +--
 5 files changed, 75 insertions(+), 47 deletions(-)
 rename src/composables/{theme.js => layoutService.js} (57%)

diff --git a/src/composables/theme.js b/src/composables/layoutService.js
similarity index 57%
rename from src/composables/theme.js
rename to src/composables/layoutService.js
index c06b5cf..3b8bf41 100644
--- a/src/composables/theme.js
+++ b/src/composables/layoutService.js
@@ -1,6 +1,6 @@
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, watch, ref, computed } from 'vue';
 
-const appConfig = reactive({
+const layoutConfig = reactive({
     ripple: false,
     darkTheme: false,
     inputStyle: 'outlined',
@@ -18,35 +18,29 @@ const layoutState = reactive({
     menuHoverActive: false
 });
 
-export function useThemeService () {
+export function useLayoutService () {
     const changeThemeSettings = (theme, darkTheme) => {
-        appConfig.theme = theme;
-        appConfig.darkTheme = darkTheme;
+        layoutConfig.theme = theme;
+        layoutConfig.darkTheme = darkTheme;
     };
 
     const setScale = scale => {
-        appConfig.scale = scale;
+        layoutConfig.scale = scale;
     };
 
     const onMenuToggle = () => {
-        debugger;
-        if (appConfig.menuMode === 'overlay') {
+        if (layoutConfig.menuMode === 'overlay') {
             layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
-            /*  if (layoutState.overlayMenuActive) {
-                this.overlayOpen.next(null);
-            } */
         }
 
         if (window.innerWidth > 991) {
             layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
         } else {
             layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
-
-            /*  if (this.state.staticMenuMobileActive) {
-                this.overlayOpen.next(null);
-            } */
         }
     };
 
-    return { appConfig: toRefs(appConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle };
+    const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
+
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive };
 }
diff --git a/src/layout/AppConfig.vue b/src/layout/AppConfig.vue
index 6303c24..44f27b4 100644
--- a/src/layout/AppConfig.vue
+++ b/src/layout/AppConfig.vue
@@ -6,21 +6,21 @@
     <Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
         <h5>Scale</h5>
         <div class="flex align-items-center">
-            <Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="appConfig.scale.value === scales[0]"></Button>
+            <Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="layoutConfig.scale.value === scales[0]"></Button>
             <div class="flex gap-2 align-items-center">
-                <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === appConfig.scale.value }"></i>
+                <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === layoutConfig.scale.value }"></i>
             </div>
-            <Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="appConfig.scale.value === scales[scales.length - 1]"></Button>
+            <Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
         </div>
 
         <template v-if="!minimal">
             <h5>Menu Type</h5>
             <div class="field-radiobutton">
-                <RadioButton name="menuMode" value="static" v-model="appConfig.menuMode.value" inputId="mode1"></RadioButton>
+                <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
                 <label for="mode1">Static</label>
             </div>
             <div class="field-radiobutton">
-                <RadioButton name="menuMode" value="overlay" v-model="appConfig.menuMode.value" inputId="mode2"></RadioButton>
+                <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
                 <label for="mode2">Overlay</label>
             </div>
         </template>
@@ -29,17 +29,17 @@
             <h5>Input Style</h5>
             <div class="flex">
                 <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="outlined" v-model="appConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
+                    <RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
                     <label for="outlined_input">Outlined</label>
                 </div>
                 <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="filled" v-model="appConfig.inputStyle.value" inputId="filled_input"></RadioButton>
+                    <RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
                     <label for="filled_input">Filled</label>
                 </div>
             </div>
 
             <h5>Ripple Effect</h5>
-            <InputSwitch v-model="appConfig.ripple.value"></InputSwitch>
+            <InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
         </template>
 
         <h5>Bootstrap</h5>
@@ -244,12 +244,12 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useThemeService } from '@/composables/theme';
+import { useLayoutService } from '@/composables/layoutService';
 
 const scales = ref([12, 13, 14, 15, 16]);
 const visible = ref(false);
 
-const { changeThemeSettings, setScale, appConfig } = useThemeService();
+const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
 
 const onConfigButtonClick = () => {
     visible.value = !visible.value;
@@ -259,7 +259,7 @@ const onChangeTheme = (theme, mode) => {
     const elementId = 'theme-css';
     const linkElement = document.getElementById(elementId);
     const cloneLinkElement = linkElement.cloneNode(true);
-    const newThemeUrl = linkElement.getAttribute('href').replace(appConfig.theme.value, theme);
+    const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
     cloneLinkElement.setAttribute('id', elementId + '-clone');
     cloneLinkElement.setAttribute('href', newThemeUrl);
     cloneLinkElement.addEventListener('load', () => {
@@ -272,17 +272,17 @@ const onChangeTheme = (theme, mode) => {
 };
 
 const decrementScale = () => {
-    setScale(appConfig.scale.value - 1);
+    setScale(layoutConfig.scale.value - 1);
     applyScale();
 };
 
 const incrementScale = () => {
-    setScale(appConfig.scale.value + 1);
-    console.log(appConfig.scale);
+    setScale(layoutConfig.scale.value + 1);
+    console.log(layoutConfig.scale);
     applyScale();
 };
 const applyScale = () => {
-    document.documentElement.style.fontSize = appConfig.scale.value + 'px';
+    document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
 };
 </script>
 
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 6d48618..d202829 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script setup>
-import { useThemeService } from '@/composables/theme';
+import { useLayoutService } from '@/composables/layoutService';
 
-const { appConfig } = useThemeService();
+const { layoutConfig } = useLayoutService();
 
 const logoUrl = () => {
-    return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+    return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
 };
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index db22a0a..483263c 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -16,29 +16,63 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, watch, ref, onMounted } from 'vue';
 import AppTopbar from './AppTopbar.vue';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppConfig from './AppConfig.vue';
+import { useLayoutService } from '@/composables/layoutService';
 
-import { useThemeService } from '@/composables/theme';
+const { onMenuToggle, layoutConfig, layoutState, isSidebarActive } = useLayoutService();
 
-const { appConfig, layoutState } = useThemeService();
+const outsideClickListener = ref(null);
+const sidebarActive = ref(false);
+
+watch(isSidebarActive, (newVal) => {
+    if (newVal) {
+        bindOutsideClickListener();
+    } else {
+        unbindOutsideClickListener();
+    }
+});
 
 const containerClass = computed(() => {
     return {
-        'layout-theme-light': appConfig.darkTheme.value === 'light',
-        'layout-theme-dark': appConfig.darkTheme.value === 'dark',
-        'layout-overlay': appConfig.menuMode.value === 'overlay',
-        'layout-static': appConfig.menuMode.value === 'static',
-        'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && appConfig.menuMode.value === 'static',
+        'layout-theme-light': layoutConfig.darkTheme.value === 'light',
+        'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
+        '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,
-        'p-input-filled': appConfig.inputStyle.value === 'filled',
-        'p-ripple-disabled': !appConfig.ripple.value
+        'p-input-filled': layoutConfig.inputStyle.value === 'filled',
+        'p-ripple-disabled': !layoutConfig.ripple.value
     };
 });
+const bindOutsideClickListener = () => {
+    if (!outsideClickListener.value) {
+        outsideClickListener.value = (event) => {
+            if (isOutsideClicked(event)) {
+                layoutState.overlayMenuActive.value = false;
+                layoutState.staticMenuMobileActive.value = false;
+                layoutState.menuHoverActive.value = false;
+            }
+        };
+        document.addEventListener('click', outsideClickListener.value);
+    }
+};
+const unbindOutsideClickListener = () => {
+    if (outsideClickListener.value) {
+        document.removeEventListener('click', outsideClickListener);
+        outsideClickListener.value = null;
+    }
+};
+const isOutsideClicked = (event) => {
+    const sidebarEl = document.querySelector('.layout-sidebar');
+    const topbarEl = document.querySelector('.layout-menu-button');
+
+    return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index e58e715..9da2b13 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -31,12 +31,12 @@
 </template>
 
 <script setup>
-import { useThemeService } from '@/composables/theme';
+import { useLayoutService } from '@/composables/layoutService';
 
-const { appConfig, onMenuToggle } = useThemeService();
+const { layoutConfig, onMenuToggle } = useLayoutService();
 
 const logoUrl = () => {
-    return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+    return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
 };
 </script>