From 5d9afb7d1cef406080b62f3bedaadedc9faeed52 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 21 Mar 2022 14:36:16 +0800
Subject: [PATCH] fix: layout sidebar collapsed, close #5373

---
 components/layout/Sider.tsx | 51 +++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index bf9d5c34e..cdd1e38db 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -1,15 +1,6 @@
 import classNames from '../_util/classNames';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
-import {
-  watchEffect,
-  inject,
-  defineComponent,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  provide,
-} from 'vue';
+import { inject, defineComponent, ref, watch, onMounted, onBeforeUnmount, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -123,25 +114,31 @@ export default defineComponent({
     siderHook && siderHook.addSider(uniqueId);
 
     onMounted(() => {
-      watchEffect(() => {
-        try {
-          mql?.removeEventListener('change', responsiveHandler);
-        } catch (error) {
-          mql?.removeListener(responsiveHandler);
-        }
-        if (typeof window !== 'undefined') {
-          const { matchMedia } = window;
-          if (matchMedia! && props.breakpoint && props.breakpoint in dimensionMaxMap) {
-            mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
-            try {
-              mql.addEventListener('change', responsiveHandler);
-            } catch (error) {
-              mql.addListener(responsiveHandler);
+      watch(
+        () => props.breakpoint,
+        () => {
+          try {
+            mql?.removeEventListener('change', responsiveHandler);
+          } catch (error) {
+            mql?.removeListener(responsiveHandler);
+          }
+          if (typeof window !== 'undefined') {
+            const { matchMedia } = window;
+            if (matchMedia! && props.breakpoint && props.breakpoint in dimensionMaxMap) {
+              mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
+              try {
+                mql.addEventListener('change', responsiveHandler);
+              } catch (error) {
+                mql.addListener(responsiveHandler);
+              }
+              responsiveHandler(mql);
             }
-            responsiveHandler(mql);
           }
-        }
-      });
+        },
+        {
+          immediate: true,
+        },
+      );
     });
     onBeforeUnmount(() => {
       try {