feat(nav): collapse 11 flat links into 4 hover/focus dropdown groups - #133
Merged
Conversation
The flat nav wrapped to two lines at desktop widths. Four top-level groups now own dropdown submenus (Product, Docs, Community, Company) built on the language switcher's pattern: the .nav-group wrapper owns hover/focus-within, the panel is opacity-gated so its links keep their tab stops, and a single delegated Escape listener (the theme toggle's script pattern) covers the one dismissal gesture CSS cannot see. Compare leaves the nav per #131 — the page stays live at /compare/ for organic traffic; nothing else in the chrome links to it. The hamburger panel below the md breakpoint keeps its mechanics and lists all ten items under their group headings. Closes #131
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #131
What
.locale-menupattern lifted verbatim: the.nav-groupwrapper owns hover/focus-within, the panel is always in the DOM and only opacity-gated, so its links keep their tab stops whether or not it is showing. Zero JS for open/close.keydownlistener (the theme toggle's script pattern) blurs the focused item so:focus-withinlets go and the panel folds./compare/(sitemap unchanged, page still built ×3 locales) — it just has no inbound nav link anymore, per the issue.Decisions worth reviewing
aria-haspopup="true"on triggers, noaria-expanded— it could only ever track half the truth (hover opens the panel without any event a script could hear), and the submenu links are never removed from the accessibility tree, so nothing is hidden from SR users either way.<button>s: clicking one focuses it, which opens the panel via focus-within — so the control is honest on desktop. In the mobile panel they stay in the tab order as heading-like stops (CSS cannot remove an element from the tab order); all links remain fully reachable.nav.comparestrings deleted fromsrc/i18n/ui.ts×3; grep confirms zero remaining consumers. Compare page prose insrc/i18n/pages/compare.tsis untouched.ui.tsin the same register as the existing nav strings: Product/Produit/المنتج, Docs/Docs/الوثائق, Community/Communauté/المجتمع, Company/Entreprise/الشركة.Verification
npx astro check(cache cleared first): 0 errors, 0 warnings (4 pre-existing hints in unrelated files).npm run build: 70 pages, compare built in en/ar/fr, sitemap still lists/en/compare/.astro preview— 23/23 checks passed:/fr/@1280 and @1024: nav is ONE line (site-nav h=36px = single trigger row, all 4 trigger tops identical); also confirmed @1024 for/en/(36px) and/ar/(39px, RTL).Documentation→/fr/docs/); Escape returns focus to body and the panel folds to opacity 0./comparehrefs,scrollWidth == clientWidthwith the panel both closed and open./en/compare/→ 200.