Update primary nagivation dropdown UX

[theskumar]

Description

• Fix the dropdown being hidden on the beta all page
• Use mouseover for quick access
• Update over states
• Update the urls to that any external urls can also be added via
  settings, removes dependeny of reverse while specifying urls
• How active page in the dropdown as well, a dark-blue border
• Update the focus outline to be a simple dashed-border, instead of bulky outline

Test Steps

• Checkout the primary navigation in the top-header

[frjo]

Nice works! Open on hover, or not, is a personal preference. I will ask the other maintainer in the meeting tomorrow what they prefer.

Two minor items that would be nice to resolve:

1. The dotted outline looks a bit off I think. I see it uses focus-visible so it should only show for keyboard navigation. But I still see it using only the mouse/trackpad.
2. When you hover over the longes menu item the bold text makes the with of the menu increase a tiny bit.

[frjo]

min-w-48 seems to not generate any styles? Why not use min-w-max? Having menu item break on two lines is undesirable.

[theskumar]

min-w-48 ensure the width of two dropdown are similar. It won't break them in two lines as it's not setting any max width. That said, I should consider added generous max-width so the dropdown doesn't look weird for a link with too many words.

Let me know if it all sounds reasonable?

[theskumar]

This is could be b/w you are not using the latest tailwind, which introduced min-w-*

[theskumar]

Nice works! Open on hover, or not, is a personal preference. I will ask the other maintainer in the meeting tomorrow what they prefer.

Two minor items that would be nice to resolve:

1. The dotted outline looks a bit off I think. I see it uses focus-visible so it should only show for keyboard navigation. But I still see it using only the mouse/trackpad.
2. When you hover over the longes menu item the bold text makes the with of the menu increase a tiny bit.

Which browser are you using, this is what i see:

[theskumar]

The visible-focus seems to be not working with x-trap and mouseover, already spent sometime trying to figure out a solution, but no luck. I'll give it another try.

[theskumar]

@frjo any feedback on the nav getting opened while on hover? The outline issue is only happening if the mousehover is used. If mouseover is not desired, there is need to chase after the focus issue.

[theskumar]

Update and fixed the outline issue on safari, it should look better now.

[frjo]

Latest version on test now.

[wes-otf]

Hey! Added functionality looks good to me, I'm just a little confused about what purpose the dotted border serves? I didn't see it changing on test at all, just stayed on All Submissions/All Projects. On Firefox 121 I can't seem to use keyboard nav at all with Hypha if that's what this is in reference to?