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>
@@ -36,24 +34,24 @@ const siderPosition = computed(() => isSmallScreen.value ? 'absolute' : 'static'
 
 <style lang="less" scoped>
 .overlay {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    background-color: #00000080;
+  background-color: #00000080;
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .content {
 
-    // background-color: #f1f5f9;
+  // background-color: #f1f5f9;
-    ::v-deep(.n-layout-scroll-container) {
+  ::v-deep(.n-layout-scroll-container) {
-        padding: 26px;
+    padding: 26px;
-    }
+  }
 }
 
 .n-layout {
-    height: 100vh;
+  height: 100vh;
 }
 </style>

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,
+    };
+  },
 });