fix(menu): resolve overflow issue with n-menu root-indent (#5616) (#5618

) * fix(menu): resolve overflow issue with `n-menu` `root-indent` (#5616) * chore: add comment * Update src/menu/demos/zhCN/indent.demo.vue --------- Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Jan 23, 2024 · 558c4b4 · 558c4b4
1 parent fce7b64
commit 558c4b4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - Fix `n-tree`'s `override-default-node-click-behavior` prop may conflict with default switcher click or checkbox click behavior.
+- Fix overflow issue with `n-menu` `root-indent` `indent`, closes (#5616)
 
 ## 2.37.3
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -5,6 +5,7 @@
 ### Fixes
 
 - 修复 `n-tree` 的 `override-default-node-click-behavior` 属性可能覆盖掉默认展开按钮和选中按钮的行为
+- 修复 `n-menu` `root-indent` `indent` 下内容溢出的问题，关闭(#5616)
 
 ## 2.37.3
 

diff --git a/src/menu/src/use-menu-child.ts b/src/menu/src/use-menu-child.ts
@@ -81,8 +81,11 @@ export function useMenuChild (props: UseMenuChildProps): UseMenuChild {
   })
   const paddingLeftRef = computed(() => {
     if (horizontalRef.value) return undefined
-    const { collapsedWidth, indent, rootIndent } = menuProps
+    const { collapsedWidth, indent: propsIdent, rootIndent: propsRootIdent } = menuProps
     const { root, isGroup } = props
+    // Fix overflow issue with `n-menu` `root-indent` `indent`, closes (#5616)
+    const indent = propsIdent + 8
+    const rootIndent = propsRootIdent === undefined ? undefined : propsRootIdent + 8
     const mergedRootIndent = rootIndent === undefined ? indent : rootIndent
     if (root) {
       if (mergedCollapsedRef.value) {
@@ -99,7 +102,7 @@ export function useMenuChild (props: UseMenuChildProps): UseMenuChild {
     if (NSubmenu && typeof NSubmenu.paddingLeftRef.value === 'number') {
       return (isGroup ? indent / 2 : indent) + NSubmenu.paddingLeftRef.value
     }
-    return 0
+    return 8
   })
   const iconMarginRightRef = computed(() => {
     const { collapsedWidth, indent, rootIndent } = menuProps