fix(NavigationMenu): only display tooltip when collapsed

This commit is contained in:
Benjamin Canac
2025-05-20 16:46:36 +02:00
parent d0be59946b
commit 44f536fd00
2 changed files with 17 additions and 5 deletions

View File

@@ -22,6 +22,9 @@ const items = [
label: 'Documentation',
icon: 'i-lucide-book-open',
badge: 10,
tooltip: {
text: 'Documentation'
},
children: [{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
@@ -42,9 +45,12 @@ const items = [
}, {
label: 'Components',
icon: 'i-lucide-box',
to: '/components',
to: '/components/navigation-menu',
active: true,
defaultOpen: true,
tooltip: {
text: 'Components'
},
children: [{
label: 'Link',
icon: 'i-lucide-link',
@@ -81,11 +87,17 @@ const items = [
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank'
target: '_blank',
tooltip: {
text: 'GitHub'
}
}, {
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
disabled: true,
tooltip: {
text: 'Help'
}
}]
]
</script>

View File

@@ -288,8 +288,8 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
:disabled="item.disabled"
@select="item.onSelect"
>
<UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
<UTooltip v-if="!!item.tooltip && orientation === 'vertical' && collapsed" :content="{ side: 'right' }" v-bind="item.tooltip">
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: level > 0 })">
<ReuseLinkTemplate :item="item" :active="active" :index="index" />
</ULinkBase>
</UTooltip>