From fa9f1f4f538bb905f8b752bda43100a04f51dd93 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 17 Mar 2022 10:32:58 +0800
Subject: [PATCH] feat: layout sider support dynamic breakpoint

---
 components/layout/Sider.tsx            | 40 ++++++++++++++++++--------
 components/layout/demo/fixed-sider.vue |  4 ++-
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index 63e52295d..bf9d5c34e 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -1,6 +1,15 @@
 import classNames from '../_util/classNames';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
-import { inject, defineComponent, ref, watch, onMounted, onBeforeUnmount, provide } from 'vue';
+import {
+  watchEffect,
+  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';
@@ -114,18 +123,25 @@ export default defineComponent({
     siderHook && siderHook.addSider(uniqueId);
 
     onMounted(() => {
-      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);
+      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);
+            }
+            responsiveHandler(mql);
+          }
+        }
+      });
     });
     onBeforeUnmount(() => {
       try {
diff --git a/components/layout/demo/fixed-sider.vue b/components/layout/demo/fixed-sider.vue
index 733585e6d..0a0fa3dbd 100644
--- a/components/layout/demo/fixed-sider.vue
+++ b/components/layout/demo/fixed-sider.vue
@@ -18,7 +18,9 @@ When dealing with long content, a fixed sider can provide a better user experien
 </docs>
 <template>
   <a-layout has-sider>
-    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
+    <a-layout-sider
+      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }"
+    >
       <div class="logo" />
       <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">