Skip to content

Restructure top nav into grouped dropdowns (desktop + mobile)#948

Open
Maximophone wants to merge 1 commit into
mainfrom
menu-restructure
Open

Restructure top nav into grouped dropdowns (desktop + mobile)#948
Maximophone wants to merge 1 commit into
mainfrom
menu-restructure

Conversation

@Maximophone

Copy link
Copy Markdown
Contributor

What & why

Replaces the flat top-menu link row with grouped navigation so content is easier to discover, per the new-website working doc and the 18 May design mockup.

New menu structure

Top item Type Contents
About link /about
Learn dropdown Why this matters → /learn · Proposal → /proposal · Our Strategy → /theory-of-change · FAQ → /faq
Community dropdown Find your local group → /communities · Join an event → Luma (new tab)
Get involved dropdown Take Action/Join → /join · Start a local group → /national-groups
Donate c2a button /donate

How it works on each device

  • Desktop — click-to-open dropdowns (also open on hover), close on click-outside or Escape; the current section is highlighted. No hover-only behaviour, so it degrades gracefully. Modeled on the existing LanguageSwitcher pattern.
  • Mobile (≤600px) — collapses to a hamburger that opens a panel; each group is a tap-to-expand <details> accordion; tapping a link navigates and auto-closes the panel (afterNavigate). Hamburger is white over the inverted hero.

Implementation

The wide and narrow navbars now diverge, so the menu is data-driven via a shared navItems.ts module.

  • New: src/lib/components/navbar/navItems.ts, src/lib/components/navbar/NavDropdown.svelte
  • Rewritten: WideNavbar, NarrowNavbar, Navbar (now take an items prop + extras snippet), src/routes/header.svelte
  • messages/en.json — new short header_* labels

Verification

  • svelte-check, ESLint, Prettier clean on all touched files.
  • Browser-tested desktop (open/close/Escape/click-outside/active-state/external-link-new-tab) and mobile (hamburger toggle, accordions, link-closes-panel, aria-current highlight, inverted hamburger).

Notes for reviewers

  • The Proposal is kept under Learn even though the latest Notion draft dropped it — removing it from the nav entirely would hurt discoverability. Easy to drop if preferred.
  • The language switcher is hidden locally because this env has a single locale (en); it renders in production where multiple locales exist.

🤖 Generated with Claude Code

Replace the flat top-menu link row with grouped navigation so content is
easier to discover, per the new-website working doc.

- About · Learn ▾ · Community ▾ · Get involved ▾ · Donate
  - Learn: Why this matters, Proposal, Our Strategy, FAQ
  - Community: Find your local group, Join an event (Luma)
  - Get involved: Take Action/Join, Start a local group
- Desktop: click/hover dropdowns (NavDropdown), close on Escape & click-outside,
  active-section highlight — modeled on the existing LanguageSwitcher pattern.
- Mobile (≤600px): hamburger toggles a panel with <details> accordion groups;
  tapping a link navigates and auto-closes (afterNavigate).
- Menu is now data-driven via navItems.ts, shared by the wide & narrow navbars.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploy Preview for pauseai ready!

Name Link
🔨 Latest commit 51b274a
🔍 Latest deploy log https://app.netlify.com/projects/pauseai/deploys/6a44198cd47c030008ec1151
😎 Deploy Preview https://deploy-preview-948--pauseai.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 57 (🟢 up 11 from production)
Accessibility: 91 (🟢 up 2 from production)
Best Practices: 100 (no change from production)
SEO: 82 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

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

@Wituareard

Copy link
Copy Markdown
Collaborator

This doesn't look intentional:
grafik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants