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

• #11955

TODO

• [ ] Import translated intl strings
• [x] Improve animations

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	906078d1e1a088c7adb03e99aa62c530a54fe546
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65d827efaa1e270008debf79
😎 Deploy Preview	https://deploy-preview-12125--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nloureiro]

@wackerow, we removed the second navigation, but I found that the sidebar should be right after the header without that grey spacing.

[nloureiro]

@wackerow, something broke here without the top bar, it’s working in production

[nloureiro]

@wackerow If I click on an option >>> then hover over another one, the first one stays active

[wackerow]

@nloureiro

we removed the second navigation, but I found that the sidebar should be right after the header without that grey spacing.

Done!

something broke here without the top bar, it’s working in production

As we chatted about, this appears to be an issue unrelated to this PR (currently in production); can address separately

If I click on an option >>> then hover over another one, the first one stays active

Yeah, I think this is still a bug. Will see if I can resolve; it's stemming from how these menus are handled under-the-hood. While I investigate, I'm curious if you see this as a blocker or not.

[konopkja]

hey @wackerow there is a typo in the menu father -> gather :P

[konopkja]

@wackerow @nloureiro because how to guides isnt clickable, we should add How to guides home to the selection as first item, because there are more guides than just these in the menu, but there is no way of getting to the hub

Similarly roadmap home might be another addition

[konopkja]

there is missing "current page" state on mobile, this functionality seems to be on desktop only

[nloureiro]

On Figma, I proposed the active to be the same background as the hover but with the base text color.

Now it's the hight contrast.

[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 https://github.com/radix-ui/primitives/issues/2326 with a potential workaround here https://github.com/radix-ui/primitives/issues/1630#issuecomment-1545995075