From 554f4615a17582add616df93e8f61d9286a664bf Mon Sep 17 00:00:00 2001
From: You <i@izoyo.cn>
Date: Thu, 16 Jun 2022 19:04:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=8F=9C=E5=8D=95=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E9=9A=90=E8=97=8F=E6=97=B6=E5=AE=BD=E5=BA=A6=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E9=94=99=E8=AF=AF=20(#1945)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: zeozhou <zeozhou@tencent.com>
---
 src/hooks/setting/useMenuSetting.ts         |  8 ++++++--
 src/layouts/default/sider/useLayoutSider.ts | 14 +++++++++-----
 src/settings/projectSetting.ts              |  2 ++
 types/config.d.ts                           |  1 +
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index 62ccf42f..3566bfd2 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -101,8 +101,12 @@ export function useMenuSetting() {
   });
 
   const getMiniWidthNumber = computed(() => {
-    const { collapsedShowTitle } = appStore.getMenuSetting;
-    return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+    const { collapsedShowTitle, siderHidden } = appStore.getMenuSetting;
+    return siderHidden
+      ? 0
+      : collapsedShowTitle
+      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
+      : SIDE_BAR_MINI_WIDTH;
   });
 
   const getCalcContentWidth = computed(() => {
diff --git a/src/layouts/default/sider/useLayoutSider.ts b/src/layouts/default/sider/useLayoutSider.ts
index 292c146f..66656b25 100644
--- a/src/layouts/default/sider/useLayoutSider.ts
+++ b/src/layouts/default/sider/useLayoutSider.ts
@@ -1,26 +1,30 @@
 import type { Ref } from 'vue';
 
-import { computed, unref, onMounted, nextTick, ref } from 'vue';
+import { computed, unref, onMounted, nextTick } from 'vue';
 
 import { TriggerEnum } from '/@/enums/menuEnum';
 
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { useDebounceFn } from '@vueuse/core';
+import { useAppStore } from '/@/store/modules/app';
 
 /**
  * Handle related operations of menu events
  */
 export function useSiderEvent() {
-  const brokenRef = ref(false);
-
+  const appStore = useAppStore();
   const { getMiniWidthNumber } = useMenuSetting();
 
   const getCollapsedWidth = computed(() => {
-    return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
+    return unref(getMiniWidthNumber);
   });
 
   function onBreakpointChange(broken: boolean) {
-    brokenRef.value = broken;
+    appStore.setProjectConfig({
+      menuSetting: {
+        siderHidden: broken,
+      },
+    });
   }
 
   return { getCollapsedWidth, onBreakpointChange };
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 825b0a28..b76246a4 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -83,6 +83,8 @@ const setting: ProjectConfig = {
     fixed: true,
     // Menu collapse
     collapsed: false,
+    // When sider hide because of the responsive layout
+    siderHidden: false,
     // Whether to display the menu name when folding the menu
     collapsedShowTitle: false,
     // Whether it can be dragged
diff --git a/types/config.d.ts b/types/config.d.ts
index cb5a5a99..8041e503 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -16,6 +16,7 @@ export interface MenuSetting {
   bgColor: string;
   fixed: boolean;
   collapsed: boolean;
+  siderHidden: boolean;
   canDrag: boolean;
   show: boolean;
   hidden: boolean;