fix(menu): menu auto closed on mobile

src/components/MenuLayout.vue

@@ -9,8 +9,6 @@
       :show-trigger="false"
       :native-scrollbar="false"
       :position="siderPosition"
-      @collapse="isMenuCollapsed = true"
-      @expand="isMenuCollapsed = false"
     >
       <slot name="sider" />
     </n-layout-sider>

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: () => ({
+  state: () => {
-    isDarkTheme: useStorage('isDarkTheme', true) as Ref<boolean>,
+    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
-    isMenuCollapsed: useStorage('isMenuCollapsed', false) as Ref<boolean>,
+    const isSmallScreen = useMediaQuery('(max-width: 700px)');
-    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,
+    };
+  },
 });