fix: menu margin (#38495)

* fix: menu margin

* chore: code clean

components/menu/SubMenu.tsx

@@ -71,6 +71,7 @@ function SubMenu(props: SubMenuProps) {
   return (
     <MenuContext.Provider value={contextValue}>
       <RcSubMenu
+        popupOffset={[10, 0]}
         {...omit(props, ['icon'])}
         title={titleNode}
         popupClassName={classNames(

components/menu/index.en-US.md

@@ -3,8 +3,6 @@ category: Components
 group: Navigation
 title: Menu
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---
 
 A versatile menu for navigation.
@@ -71,7 +69,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 ### Menu
 
 | Param                | Description                                                      | Type                                                                       | Default value          | Version |
-| --- | --- | --- | --- | --- |
+| -------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | ------- |
 | defaultOpenKeys      | Array with the keys of default opened sub menus                  | string\[]                                                                  | -                      |         |
 | defaultSelectedKeys  | Array with the keys of default selected menu items               | string\[]                                                                  | -                      |         |
 | expandIcon           | custom expand icon of submenu                                    | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | -                      | 4.9.0   |
@@ -134,7 +132,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 #### SubMenuType
 
 | Param          | Description                                                | Type                        | Default value     | Version |
-| --- | --- | --- | --- | --- | --- |
+| -------------- | ---------------------------------------------------------- | --------------------------- | ----------------- | ------- | --- |
 | children       | Sub-menus or sub-menu items                                | [ItemType\[\]](#ItemType)   | -                 |         |
 | disabled       | Whether sub-menu is disabled                               | boolean                     | false             |         |
 | icon           | Icon of sub menu                                           | ReactNode                   | -                 |         |

components/menu/index.zh-CN.md

@@ -4,8 +4,6 @@ group: 导航
 title: Menu
 subtitle: 导航菜单
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---
 
 为页面和功能提供导航的菜单列表。
@@ -14,7 +12,7 @@ demo:
 
 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
 
-更多布局和导航的使用可以参考：[通用布局](/components/layout)。
+更多布局和导航的使用可以参考：[通用布局](/components/layout-cn)。
 
 ## 开发者注意事项
 
@@ -72,7 +70,7 @@ return <Menu items={items} />;
 ### Menu
 
 | 参数                 | 说明                                           | 类型                                                                       | 默认值                 | 版本   |
-| --- | --- | --- | --- | --- |
+| -------------------- | ---------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | ------ |
 | defaultOpenKeys      | 初始展开的 SubMenu 菜单项 key 数组             | string\[]                                                                  | -                      |        |
 | defaultSelectedKeys  | 初始选中的菜单项 key 数组                      | string\[]                                                                  | -                      |        |
 | expandIcon           | 自定义展开图标                                 | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | -                      | 4.9.0  |
@@ -135,7 +133,7 @@ return <Menu items={items} />;
 #### SubMenuType
 
 | 参数           | 说明                                 | 类型                        | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| -------------- | ------------------------------------ | --------------------------- | ------ | ---- |
 | children       | 子菜单的菜单项                       | [ItemType\[\]](#ItemType)   | -      |      |
 | disabled       | 是否禁用                             | boolean                     | false  |      |
 | icon           | 菜单图标                             | ReactNode                   | -      |      |

components/menu/style/index.tsx

@@ -140,7 +140,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
             flex: 'none',
           },
         },
-        [`${componentCls}-item, ${componentCls}-submenu`]: {
+        [`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: {
           borderRadius: token.radiusItem,
         },
 

components/menu/style/theme.tsx

@@ -24,12 +24,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     motionEaseInOut,
     motionEaseOut,
     menuItemPaddingInline,
-    itemMarginInline,
     motionDurationFast,
     colorItemTextHover,
     lineType,
     colorSplit,
-    colorItemBgActive,
 
     // Disabled
     colorItemTextDisabled,
@@ -41,8 +39,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     colorDangerItemBgActive,
     colorDangerItemBgSelected,
 
-    radiusItem,
-
     colorItemBgHover,
   } = token;
 
@@ -84,46 +80,17 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
             backgroundColor: colorItemBgHover,
           },
 
-          '&:active::before': {
-            content: '""',
-            position: 'absolute',
-            insetInlineStart: 0,
-            top: 0,
-            width: `100%`,
-            height: '100%',
-            flex: 1,
-            borderRadius: radiusItem,
-            backgroundColor: colorItemBgActive,
-            transition: `background-color ${motionDurationFast}`,
+          '&:active': {
+            backgroundColor: colorItemBgSelected,
           },
         },
         [`${componentCls}-submenu-title`]: {
-          '&::before': {
-            content: '""',
-            position: 'absolute',
-            insetInlineStart: itemMarginInline,
-            top: 0,
-            width: `calc(100% - ${itemMarginInline * 2}px)`,
-            height: '100%',
-            borderRadius: radiusItem,
-            backgroundColor: 'transparent',
-            transition: `background-color ${motionDurationFast}`,
-          },
-
-          '&:hover::before': {
+          '&:hover': {
             backgroundColor: colorItemBgHover,
           },
 
-          '&:active::after': {
-            content: '""',
-            position: 'absolute',
-            insetInlineStart: itemMarginInline,
-            top: 0,
-            width: `calc(100% - ${itemMarginInline * 2}px)`,
-            height: '100%',
-            borderRadius: radiusItem,
-            backgroundColor: colorItemBgActive,
-            transition: `background-color ${motionDurationFast}`,
+          '&:active': {
+            backgroundColor: colorItemBgSelected,
           },
         },
       },

components/menu/style/vertical.tsx

@@ -29,16 +29,12 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
       textOverflow: 'ellipsis',
     },
 
-    [`${componentCls}-item`]: {
+    [`${componentCls}-item, ${componentCls}-submenu-title`]: {
       marginInline: itemMarginInline,
       marginBlock: menuItemMarginInline,
       width: `calc(100% - ${itemMarginInline * 2}px)`,
     },
 
-    [`${componentCls}-submenu-title`]: {
-      marginBlock: menuItemMarginInline,
-    },
-
     // disable margin collapsed
     [`${componentCls}-submenu`]: {
       paddingBottom: 0.02,