Nav menu - redesign implementation

[wackerow]

Description

Implements the newly redesigned navigation menu for both desktop and mobile, including changes to the information architecture

• Figma design
• Updates the information architecture inside the useNav hook with new menu item structure, updated labels and addition of item descriptions/subtext.

Desktop

• Uses Radix-UI library for NavigationMenu component
• Includes keyboard navigation/a11y

Mobile

• Uses Chakra-UI Accordion component

Preview link

• https://deploy-preview-12125--ethereumorg.netlify.app/

Related issue

• Epic: Implement navigation redesign #11955

TODO

• Import translated intl strings
• Improve animations

[wackerow]

Flipped this to "ready for review" but please do not merge until translated strings are imported, which is the last blocking todo.

[konopkja]

we have a little bit of inconsistency with use cases, can we change Desci and Refi to be same format as with main use cases? (acronym first, full name second)

[nloureiro]

[bug] @wackerow, I think this spacing is too big. There is an extra margin that leaves the navigation too far out for the glyph

[nloureiro]

@wackerow, there are two bugs in the menu's interactivity. We can chat about it if it needs more details.

1. I think it would be great if we could open the menu by clicking and by hovering with delay, but it creates an issue:

• Accidental closing of the menu when clicking >>> I'm reading the menu and hover one option > it opens with the hover delay > and because it delays a little bit, I click too > accidentally closes the menu.

solution: add the condition: if open && hover { disable the close option }

2. The gap between the nav button and the menu causes it to close without the intention to, but visually, everything looks great, the button size included.

• if the user takes a little bit, more than the delay, to go from the header to the menu, it closes the menu

Solution????: make the button go all the way to the bottom part of the header, with an inside tag that is the size of the actual button to create balance visually, but the interaction keeps the menu open (not sure it makes sense, open to discuss other solutions )

[pettinarip]

@wackerow, there are two bugs in the menu's interactivity. We can chat about it if it needs more details.

1. I think it would be great if we could open the menu by clicking and by hovering with delay, but it creates an issue:

• Accidental closing of the menu when clicking >>> I'm reading the menu and hover one option > it opens with the hover delay > and because it delays a little bit, I click too > accidentally closes the menu.

solution: add the condition: if open && hover { disable the close option }

2. The gap between the nav button and the menu causes it to close without the intention to, but visually, everything looks great, the button size included.

• if the user takes a little bit, more than the delay, to go from the header to the menu, it closes the menu

Solution????: make the button go all the way to the bottom part of the header, with an inside tag that is the size of the actual button to create balance visually, but the interaction keeps the menu open (not sure it makes sense, open to discuss other solutions )

@wackerow
For 1, it seems like a known issue radix-ui/primitives#2326 with a potential workaround here radix-ui/primitives#1630 (comment)

[pettinarip]

🚀 🚀 🚀 🚀

[corwintines]

Just left a couple of comments on some spelling, but this looks good otherwise to me! Nice work!