From 71f79a5bbfe0dd5451a435c0a55e8b77ee7d3848 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 18 Apr 2022 08:36:22 +0200
Subject: [PATCH] fix(menu): menu auto closed on mobile

---
 src/components/MenuLayout.vue | 26 ++++++++++++--------------
 src/stores/style.store.ts     | 28 ++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/MenuLayout.vue b/src/components/MenuLayout.vue
index f5db7003..721a14d7 100644
--- a/src/components/MenuLayout.vue
+++ b/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;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #00000080;
-    cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #00000080;
+  cursor: pointer;
 }
 
 .content {
 
-    // background-color: #f1f5f9;
-    ::v-deep(.n-layout-scroll-container) {
-        padding: 26px;
-    }
+  // background-color: #f1f5f9;
+  ::v-deep(.n-layout-scroll-container) {
+    padding: 26px;
+  }
 }
 
 .n-layout {
-    height: 100vh;
+  height: 100vh;
 }
 </style>
\ No newline at end of file
diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts
index 79c372cf..bc168f8a 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,
+    };
+  },
 });