fix(menu): menu auto closed on mobile

1 files changed, 22 insertions, 6 deletions

diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts
index 79c372c..bc168f8 100644
--- a/src/stores/style.store.ts
+++ b/src/stores/style.store.ts
@@ -1,11 +1,27 @@
-import { useMediaQuery, useStorage } from '@vueuse/core';
+import { useMediaQuery, useStorage, whenever } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import type { Ref } from 'vue';
 
 export const useStyleStore = defineStore('style', {
-  state: () => ({
-    isDarkTheme: useStorage('isDarkTheme', true) as Ref<boolean>,
-    isMenuCollapsed: useStorage('isMenuCollapsed', false) as Ref<boolean>,
-    isSmallScreen: useMediaQuery('(max-width: 700px)'),
-  }),
+  state: () => {
+    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
+    const isSmallScreen = useMediaQuery('(max-width: 700px)');
+    const isMenuCollapsed = useStorage('isMenuCollapsed', !isSmallScreen.value) as Ref<boolean>;
+
+    whenever(
+      () => !isSmallScreen.value,
+      () => (isMenuCollapsed.value = false)
+    );
+
+    whenever(
+      () => isSmallScreen.value,
+      () => (isMenuCollapsed.value = true)
+    );
+
+    return {
+      isDarkTheme,
+      isMenuCollapsed,
+      isSmallScreen,
+    };
+  },
 });