feat(header): ✨ add navigation menu with dropdown support - #814
aXenDeveloper wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0473ff85ea
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| discover: t(HEADER_NAV_MESSAGE_KEYS.discover), | ||
| search: t(HEADER_NAV_MESSAGE_KEYS.search), | ||
| }), | ||
| ...EXAMPLE_NAV_ITEMS, |
There was a problem hiding this comment.
Remove the example links from the shared header
Every consumer of MainHeader, including the fresh create-vitnode-app scaffold, now receives these demo Community/Resources entries unconditionally. That scaffold has no plugins and its registered core routes include /discover and /search but not /docs, so selecting Resources → Documentation reaches the not-found page; the hard-coded English labels also bypass the active locale. Remove the examples from the library default or accept real application-provided navigation instead.
Useful? React with 👍 / 👎.
| {...props} | ||
| /> | ||
| > | ||
| <span |
There was a problem hiding this comment.
Keep the decorative highlight outside the list
NavigationMenuPrimitive.List renders an HTMLUListElement, but this adds a <span> as its direct child alongside the menu's <li> items. A <ul> may only contain list items and script-supporting elements, so this produces invalid list markup and can interfere with assistive technology's list representation; render the decoration outside the list or through CSS instead.
AGENTS.md reference: AGENTS.md:L56-L56
Useful? React with 👍 / 👎.
| onFocus={event => { | ||
| const item = itemUnder(event.target); | ||
| if (item) moveHighlightTo(item); | ||
| onFocus?.(event); | ||
| }} |
There was a problem hiding this comment.
Clear the highlight when keyboard focus leaves
When a keyboard user focuses an inactive menu item and then tabs completely out of the navigation, this handler makes the highlight visible but no blur handler calls settleHighlight or hides it. With no open trigger or active link mutation to wake the observers, the last focused item remains visibly highlighted after focus has moved elsewhere; handle focus leaving the list analogously to onPointerLeave.
Useful? React with 👍 / 👎.
Improving Documentation
pnpm lint:fixto fix formatting issues before opening the PR.Description
What?
Why?