feat: layout sider support dynamic breakpoint

Author: tangjinzhou

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);
+      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);
           }
-          responsiveHandler(mql);
         }
-      }
+      });
     });
     onBeforeUnmount(() => {
       try {

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">