fix: BaseMenu menu-item class

Author: sendya

examples/index.tsx

@@ -1,5 +1,5 @@
 import 'ant-design-vue/dist/antd.less';
-import { createApp, defineComponent, watch, ref } from 'vue';
+import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
 import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
 import { Avatar } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
@@ -30,22 +30,36 @@ const BasicLayout = defineComponent({
     const menuData = getMenuData(getRoutes());
     globalState.menuData = menuData;
 
-    const cacheOpenKeys = ref<string[]>([]);
-    watch(
-      () => state.collapsed,
-      (collapsed: boolean) => {
-        console.log('post watch', collapsed, state.collapsed);
-        if (collapsed) {
-          cacheOpenKeys.value = state.openKeys;
-          state.openKeys = [];
-        } else {
-          state.openKeys = cacheOpenKeys.value;
-        }
-      },
-      {
-        flush: 'pre',
-      },
-    );
+    const updateSelectedMenu = () => {
+      const matched = route.matched.concat().map(item => item.path);
+      matched.shift();
+      state.selectedKeys = matched;
+    };
+
+    onMounted(() => {
+      // if sider collapsed, set openKeys is null.
+      const cacheOpenKeys = ref<string[]>([]);
+      watch(
+        () => state.collapsed,
+        (collapsed: boolean) => {
+          console.log('post watch', collapsed, state.collapsed);
+          if (collapsed) {
+            cacheOpenKeys.value = state.openKeys;
+            state.openKeys = [];
+          } else {
+            state.openKeys = cacheOpenKeys.value;
+          }
+        },
+        {
+          flush: 'pre',
+        },
+      );
+
+      // watch route
+      watchEffect(() => {
+        updateSelectedMenu();
+      });
+    });
 
     return () => (
       <RouteContextProvider value={state}>
@@ -67,11 +81,7 @@ const BasicLayout = defineComponent({
           {...{
             'onUpdate:collapsed': $event => (state.collapsed = $event),
             'onUpdate:openKeys': $event => (state.openKeys = $event),
-            'onUpdate:selectedKeys': () => {
-              const matched = route.matched.concat().map(item => item.path);
-              matched.shift();
-              state.selectedKeys = matched;
-            },
+            'onUpdate:selectedKeys': updateSelectedMenu,
           }}
           v-slots={{
             rightContentRender: () => (

src/SiderMenu/BaseMenu.tsx

@@ -167,12 +167,12 @@ class MenuUtil {
     const { prefixCls, i18n } = this.props;
     const menuTitle = (i18n && i18n(item.meta?.title)) || item.meta?.title;
     const defaultTitle = item?.meta.icon ? (
-      <span class={`${prefixCls}-menu-item`}>
-        <CustomTag {...attrs} {...props}>
+      <CustomTag {...attrs} {...props}>
+        <span class={`${prefixCls}-menu-item`}>
           {!isChildren && <LazyIcon icon={item.meta.icon} />}
           <span class={`${prefixCls}-menu-item-title`}>{menuTitle}</span>
-        </CustomTag>
-      </span>
+        </span>
+      </CustomTag>
     ) : (
       <span class={`${prefixCls}-menu-item`}>{menuTitle}</span>
     );

src/SiderMenu/index.less

@@ -9,7 +9,8 @@
   position: relative;
   background-color: @layout-sider-background;
   border-right: 0;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s, min-width 0.3s,
+    max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   z-index: 9;
 
   &.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
@@ -108,6 +109,10 @@
     z-index: 10;
     min-height: 100%;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+
+    span.@{ant-prefix}-pro-menu-item-title {
+      transition: none;
+    }
   }
 
   .@{ant-prefix}-layout-sider-children {