Dropdown does not recognize active links about ui HOT 4 CLOSED

Will look into it!

from ui.

There is indeed no active styles defined on the Dropdown links, what would you expect?

from ui.

1. Because item.active and item.inactive exist in the UI property.
2. Because VerticalNavigation is a very similar component and it works this way.

If I have a dropdown that has a Settings link, but the user is already on the settings page, I would like to communicate that with something more than just disabled. I'd like to communicate it exactly as I do in the VerticalNavigation (with the active style).

from ui.

I took a look at this issue and it appears that there were two problems in play. In the reproduction you linked, I was able to get some of your styling to be applied by adding dark: variants to the UI definition:

const ui = {
  active: 'before:bg-red-500 bg-red-500 dark:before:bg-red-500 dark:bg-red-500',
  inactive:
    'hover:before:bg-red-500 hover:bg-red-500 dark:hover:before:bg-red-500 dark:hover:bg-red-500',
};

This works, but it applies inactive styling to every item even if the item matched the active page. I took a look at the source and determined that I could pass a variable from the parent NuxtLink component and it would provide the functionality you were looking for without modifying the existing behavior.

I opened a PR to address the issue, but I believe the UI definitions would still need dark variants to function as expected. I am unsure if this is expected functionality of the functions that merge the tailwind classes or if a separate issue should be opened to investigate.

from ui.