Skip to content

Commit f004031

Browse files
benjamincanacbenjamincanac
committed
fix(NavigationMenu): hide label and trailing with css when collapsed
Resolves #4254
1 parent cffaaaa commit f004031

File tree

4 files changed

+55
-73
lines changed

4 files changed

+55
-73
lines changed

‎src/runtime/components/NavigationMenu.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
308308
</slot>
309309

310310
<span
311-
v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
311+
v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>]"
312312
data-slot="linkLabel"
313313
:class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
314314
>
@@ -321,7 +321,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
321321

322322
<component
323323
:is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
324-
v-if="(!collapsed || orientation !== 'vertical') && ((item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])"
324+
v-if="(item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>]"
325325
as="span"
326326
data-slot="linkTrailing"
327327
:class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
@@ -483,7 +483,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
483483
modelValue,
484484
defaultValue: defaultValue ?? getAccordionDefaultValue(list)
485485
} : {}"
486-
:is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
486+
:is="orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
487487
as="ul"
488488
data-slot="list"
489489
:class="ui.list({ class: props.ui?.list })"

‎src/theme/navigation-menu.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,8 @@ export default (options: Required<ModuleOptions>) => ({
131131
collapsed: true,
132132
class: {
133133
link: 'px-1.5',
134+
linkLabel: 'hidden',
135+
linkTrailing: 'hidden',
134136
content: 'shadow-sm rounded-sm min-h-6 p-1'
135137
}
136138
}, {

‎test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -909,44 +909,34 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
909909

910910
exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
911911
"<nav data-collapsed="true" data-slot="root" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col" aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
912-
<div style="position: relative;">
913-
<ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
914-
<li data-menu-item="" data-slot="item" class="min-w-0"></li>
915-
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
916-
<!--v-if-->
917-
<!--v-if-->
918-
</button>
919-
<!--v-if-->
920-
<!--v-if-->
921-
</li>
922-
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 px-1.5 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg>
923-
<!--v-if-->
924-
<!--v-if-->
925-
</button>
926-
<!--v-if-->
927-
<!--v-if-->
928-
</li>
929-
</ul>
930-
</div>
912+
<ul data-slot="list" class="isolate min-w-0">
913+
<li data-menu-item="" data-slot="item" class="min-w-0"></li>
914+
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span data-slot="linkLabel" class="truncate hidden">Documentation<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto gap-1.5 items-center hidden"><span data-slot="linkTrailingBadge" class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span data-slot="label" class="truncate">10</span>
915+
<!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
916+
</button>
917+
<!--v-if-->
918+
<!--v-if-->
919+
</li>
920+
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" data-reka-collection-item="" data-active="" aria-current="page" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 px-1.5 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span data-slot="linkLabel" class="truncate hidden">Components<!--v-if--></span><span as="span" data-slot="linkTrailing" class="group ms-auto gap-1.5 items-center hidden"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkTrailingIcon" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
921+
<!--v-if-->
922+
<!--v-if-->
923+
</li>
924+
</ul>
931925
<div data-slot="separator" class="px-2 h-px bg-border"></div>
932-
<div style="position: relative;">
933-
<ul data-slot="list" class="isolate min-w-0" data-orientation="vertical">
934-
<li data-menu-item="" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg>
935-
<!--v-if-->
936-
<!--v-if-->
937-
</a>
938-
<!--v-if-->
939-
<!--v-if-->
940-
</li>
941-
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg>
942-
<!--v-if-->
943-
<!--v-if-->
944-
</button>
926+
<ul data-slot="list" class="isolate min-w-0">
927+
<li data-menu-item="" data-slot="item" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors"></svg><span data-slot="linkLabel" class="truncate hidden">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLabelExternalIcon" class="inline-block size-3 align-top text-dimmed"></svg></span>
945928
<!--v-if-->
929+
</a>
930+
<!--v-if-->
931+
<!--v-if-->
932+
</li>
933+
<li data-menu-item="" data-slot="item" class="min-w-0"><button type="button" disabled="" data-reka-collection-item="" data-slot="link" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="linkLeadingIcon" class="shrink-0 size-5 text-dimmed"></svg><span data-slot="linkLabel" class="truncate hidden">Help<!--v-if--></span>
946934
<!--v-if-->
947-
</li>
948-
</ul>
949-
</div>
935+
</button>
936+
<!--v-if-->
937+
<!--v-if-->
938+
</li>
939+
</ul>
950940
<!--v-if-->
951941
<!--v-if-->
952942
</nav>"

0 commit comments

Comments
 (0)