Open ZTL-UwU opened 3 months ago
I also want to add that when using indicator <NavigationMenuIndicator />
(before NavigationMenuList
closing tag), it translates back to the first link when closing the popover of other menu items, which looks very weird and buggy.
And when using :disable-hover-trigger="true"
it sometimes closes on mouseout and sometimes it stays open. Why this prop is not disabling trigger hover events all together instead of some unexpected mixed behaviour?
@ZTL-UwU My menu has some custom tweaks, so I am not sure this will work if you use example from the docs.
Try this:
Go to NavigationMenu.vue component and instead of max-w-max
put w-full
on NavigationMenuRoot
class
Then it should auto-position the dropdown, only drawback is that dropdown can't have bigger width than the NavigationMenuRoot div.
Edit: this is my class for the root: relative z-10 flex w-full items-center justify-center
with this class list the dropdown will be centered inside this container and not at the start.
I also want to add that when using indicator
<NavigationMenuIndicator />
(beforeNavigationMenuList
closing tag), it translates back to the first link when closing the popover of other menu items, which looks very weird and buggy.And when using
:disable-hover-trigger="true"
it sometimes closes on mouseout and sometimes it stays open. Why this prop is not disabling trigger hover events all together instead of some unexpected mixed behaviour?
So, this indicator translate happens because of how tailwind-animate
classes animate-in
and animate-out
work; they add animations for several properties, including transform/translate.
So if someone is using indicator:
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink>...</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuIndicator />
</NavigationMenuList>
</NavigationMenu>
If you just want to fade the indicator (without translating it to the initial state), replace all [state-hidden] and [state-visible] classes with this: data-[state=hidden]:animate-fade-out data-[state=visible]:animate-fade-in
And fade-in and fade-out is already defined in tailwind.config.js as part of shadcn. I just like to adjust it to my custom settings:
animation: ({ theme }) => ({
// Other animations...
"fade-in": `fade-in ${theme("transitionDuration.DEFAULT")} ${theme("transitionTimingFunction.DEFAULT")}`,
"fade-out": `fade-out ${theme("transitionDuration.DEFAULT")} ${theme("transitionTimingFunction.DEFAULT")}`,
}),
@ZTL-UwU This is long standing issue in radix-ui
and radix-vue
This should be fixed in radix-vue
v2
Reproduction
https://stackblitz.com/edit/oaoibr?file=src%2FApp.vue
Describe the bug
The popoever always stays at the front even though the hovered item is at the back.
System Info
Contributes