Skip to content

feat(header): add Header component with mobile menu modes#151

Merged
ndlabdev merged 3 commits into
devfrom
feat/header-component
Jul 7, 2026
Merged

feat(header): add Header component with mobile menu modes#151
ndlabdev merged 3 commits into
devfrom
feat/header-component

Conversation

@ndlabdev

@ndlabdev ndlabdev commented Jul 7, 2026

Copy link
Copy Markdown
Owner

Summary

Adds the Header component: a responsive, sticky app header sized by h-(--ui-header-height), completing the height contract with Main and Error, with a mobile menu that composes the existing Modal, Slideover, and Drawer overlays.

Closes #148

Stacked on #150 (Main); merge that first, this diff then shrinks to the Header commit only.

Type of change

  • 🐛 Bug fix
  • ✨ New feature / component
  • 📖 Documentation
  • ♻️ Refactor / chore
  • ⚠️ Breaking change

Changes

  • Header component (src/lib/components/Header/): sticky translucent blurred <header> with title/to brand link, left/children(center, lg+)/right areas, top/bottom rows, all conditionally rendered
  • Mobile menu via mode: 'modal' | 'slideover' | 'drawer' composing the existing overlays (focus trap, scroll lock, dismissal inherited); typed menu prop (HeaderMenuProps: side, direction, overlay, dismissible); body/content snippets forwarded
  • Toggle button: toggle: boolean | ButtonProps, toggleSide, menu/close icon swap, aria-expanded, user onclick composed with the toggle behavior (preventDefault cancels opening), auto-hidden when there is nothing to open
  • Bindable open; autoClose closes the menu on route change
  • Hardening review applied with probe-first regressions: composed onclick, aria-expanded, no empty center area, menu option forwarding
  • 37 browser tests; docs route /header; menu icon added to icons config; public exports (Header, HeaderProps, HeaderMode, HeaderMenuProps); CHANGELOG entry

Checklist

  • Linked the related issue (Closes #…)
  • pnpm check passes (0 errors, 0 warnings)
  • pnpm lint passes
  • pnpm test passes
  • Added or updated tests for the change
  • Updated CHANGELOG.md under [Unreleased]
  • Followed component conventions (no comments outside *.types.ts, Material 3 design tokens)

Screenshots / notes

  • The docs layout header is intentionally not replaced by this component yet (its hamburger opens the docs sidebar, a different pattern); planned together with a future NavigationMenu.
  • Closes #148 does not auto-close on merge to dev; close manually after merging per repo convention.

@ndlabdev ndlabdev added the enhancement New feature or request label Jul 7, 2026
@ndlabdev ndlabdev self-assigned this Jul 7, 2026
@ndlabdev
ndlabdev merged commit c106e0a into dev Jul 7, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant