Skip to content

refactor(nav): split Summit and Foundation headers into sub-components [INTORG-404]#123

Merged
JonathanMatthey merged 4 commits intostagingfrom
jm/intorg-404-SummitHeader-into-smaller-file
Apr 17, 2026
Merged

refactor(nav): split Summit and Foundation headers into sub-components [INTORG-404]#123
JonathanMatthey merged 4 commits intostagingfrom
jm/intorg-404-SummitHeader-into-smaller-file

Conversation

@JonathanMatthey
Copy link
Copy Markdown
Collaborator

Summary

  • Split SummitHeader.astro (379 lines) and FoundationHeader.astro (333 lines) into focused sub-components with co-located styles
  • Extract shared navigation behavior (mobile toggle, submenu toggle, keyboard/click-outside handling) into src/scripts/header-nav.ts
  • Move shared HamburgerButton to src/components/shared/ and shared MenuItem/MenuGroup types to src/types/navigation.ts
  • Each header is now a slim orchestrator (~60 lines) composing NavMenu, NavActions, HamburgerButton, and a site-specific script

Related Issue

INTORG-404

Manual Test

  • Verify Summit header navigation works (desktop + mobile toggle, submenus, active link highlighting)
  • Verify Foundation header navigation works (desktop + mobile toggle, submenus, developer link highlighting)
  • Test keyboard navigation (Escape closes submenus)
  • Test responsive breakpoint at 1060px transitions cleanly

Checks

  • pnpm run format
  • pnpm run lint

PR Checklist

  • PR title follows Conventional Commits (e.g. feat: ..., fix: ...)
  • Linked issue included
  • Scope is focused (target ~10-20 files when possible)
  • Screenshots for UI changes (if applicable)

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 12, 2026

Deploy Preview for interledger-org-v5 ready!

Name Link
🔨 Latest commit d8c23d8
🔍 Latest deploy log https://app.netlify.com/projects/interledger-org-v5/deploys/69e20dddea69d9000820d14d
😎 Deploy Preview https://deploy-preview-123--interledger-org-v5.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@JonathanMatthey JonathanMatthey self-assigned this Mar 12, 2026
@JonathanMatthey JonathanMatthey marked this pull request as draft March 12, 2026 17:48
@JoblersTune
Copy link
Copy Markdown
Contributor

When this is in you should be un-blocked here #154

@JonathanMatthey JonathanMatthey marked this pull request as ready for review March 26, 2026 12:51
@JonathanMatthey JonathanMatthey force-pushed the jm/intorg-404-SummitHeader-into-smaller-file branch from 2397116 to 4fc0fbe Compare March 26, 2026 13:17
@JonathanMatthey JonathanMatthey force-pushed the jm/intorg-404-SummitHeader-into-smaller-file branch from 485d3cb to 04772c8 Compare April 11, 2026 09:57
@JonathanMatthey JonathanMatthey force-pushed the jm/intorg-404-SummitHeader-into-smaller-file branch from 01fbb9f to c1366cc Compare April 11, 2026 10:48
@JonathanMatthey JonathanMatthey force-pushed the jm/intorg-404-SummitHeader-into-smaller-file branch from 61e8cda to 1f09e90 Compare April 11, 2026 11:00
@JonathanMatthey JonathanMatthey force-pushed the jm/intorg-404-SummitHeader-into-smaller-file branch from 1f09e90 to 3e85a50 Compare April 17, 2026 08:43
Copy link
Copy Markdown
Contributor

@Anca2022 Anca2022 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made some changes to keep the translation work already done.

I have my doubts whether it's necessary to pass LanguageSwitcher classes as props

Some things are still broken:

  • the active highlighting doesn't work (it only works for tech blog, and even there it's incomplete - it doesn't highlight the nav parent item when on a particular tech blog article)
  • keyboard navigation doesn't work either - items hidden from view are reachable by tabbing, pressing ESC or clicking outside the open hamburger menu doesn't close it

But I think those should be handled as part of a different PR
I opened a new issue for those: https://linear.app/interledger/issue/INTORG-629/fix-navigation-on-v5-link-highlighting-and-keyboard-navigation

>
<h2 class="sr-only" id="block-interledger-mainnavigation-menu">
{t('nav.main')}
Main Navigation
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Main Navigation
{t('nav.main')}

Let's keep translations in place :)

Comment thread src/components/LanguageSwitcher.astro Outdated
@JonathanMatthey JonathanMatthey merged commit 91d585c into staging Apr 17, 2026
6 checks passed
@JonathanMatthey JonathanMatthey deleted the jm/intorg-404-SummitHeader-into-smaller-file branch April 17, 2026 11:18
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.

3 participants