feat: layout sider support dynamic breakpoint

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,6 +123,12 @@ 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) {
@@ -127,6 +142,7 @@ export default defineComponent({
           }
         }
       });
+    });
     onBeforeUnmount(() => {
       try {
         mql?.removeEventListener('change', responsiveHandler);

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