fix(layout): fix menu title center error

ant-design · Aug 31, 2023 · 904a89f · 904a89f
1 parent af12bf3
commit 904a89f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -236,6 +236,8 @@ class MenuUtil {
             this.props?.hashId,
             {
               [`${baseClassName}-item-title-collapsed`]: collapsed,
+              [`${baseClassName}-item-title-collapsed-level-${level}`]:
+                collapsed,
               [`${baseClassName}-group-item-title`]: menuType === 'group',
               [`${baseClassName}-item-collapsed-show-title`]:
                 menu?.collapsedShowTitle && collapsed,
@@ -379,6 +381,7 @@ class MenuUtil {
           this.props?.hashId,
           {
             [`${baseClassName}-item-title-collapsed`]: collapsed,
+            [`${baseClassName}-item-title-collapsed-level-${level}`]: collapsed,
             [`${baseClassName}-item-collapsed-show-title`]:
               menu?.collapsedShowTitle && collapsed,
           },
@@ -421,6 +424,8 @@ class MenuUtil {
             this.props?.hashId,
             {
               [`${baseClassName}-item-title-collapsed`]: collapsed,
+              [`${baseClassName}-item-title-collapsed-level-${level}`]:
+                collapsed,
               [`${baseClassName}-item-link`]: true,
               [`${baseClassName}-item-collapsed-show-title`]:
                 menu?.collapsedShowTitle && collapsed,
@@ -460,24 +465,28 @@ class MenuUtil {
         onClick: () => onCollapse && onCollapse(true),
         children: undefined,
       };
-      return (
+      return level === 0 ? (
         <MenuItemTooltip
           collapsed={collapsed}
           title={menuItemTitle}
           disable={item.disabledTooltip}
         >
           {menuItemRender(renderItemProps, defaultItem, this.props)}
         </MenuItemTooltip>
+      ) : (
+        menuItemRender(renderItemProps, defaultItem, this.props)
       );
     }
-    return (
+    return level === 0 ? (
       <MenuItemTooltip
         collapsed={collapsed}
         title={menuItemTitle}
         disable={item.disabledTooltip}
       >
         {defaultItem}
       </MenuItemTooltip>
+    ) : (
+      defaultItem
     );
   };
 

diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -75,8 +75,6 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
           whiteSpace: 'nowrap',
         },
         '&-collapsed': {
-          flexDirection: 'column',
-          justifyContent: 'center',
           minWidth: 40,
           height: 40,
           [`${token.componentCls}-item-icon`]: {
@@ -93,6 +91,10 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
             display: 'none !important',
           },
         },
+        '&-collapsed-level-0': {
+          flexDirection: 'column',
+          justifyContent: 'center',
+        },
         [`&${token.componentCls}-group-item-title`]: {
           gap: token.marginXS,
           height: 18,