Skip to content

add header with language selector and theme toggle#398

Merged
JeremyDev87 merged 1 commit intomasterfrom
feat/319-header-theme-system
Feb 16, 2026
Merged

add header with language selector and theme toggle#398
JeremyDev87 merged 1 commit intomasterfrom
feat/319-header-theme-system

Conversation

@JeremyDev87
Copy link
Owner

Summary

Implements the responsive header navigation system for the landing page, addressing all requirements from #319.

  • Header: Sticky navigation bar with backdrop blur, logo/brand link, desktop nav links, and mobile menu
  • ThemeToggle: Light/dark/system mode switching powered by next-themes with dropdown menu
  • LanguageSelector: 5-language locale switcher (en, ko, ja, zh-CN, es) using next-intl navigation
  • MobileMenu: Sheet-based overlay containing nav links, theme toggle, and language selector
  • i18n: Header translation messages added for all 5 supported locales
  • UI: Added Sheet component from shadcn/ui (radix-ui) and radix-ui dependency

Files Changed

Area Files
Components components/Header/index.tsx, LanguageSelector.tsx, MobileMenu.tsx, ThemeToggle.tsx, constants.ts
UI components/ui/sheet.tsx
i18n i18n/navigation.ts, messages/{en,ko,ja,zh-CN,es}.json
Layout src/app/[locale]/layout.tsx
Tests __tests__/components/Header/{Header,LanguageSelector,MobileMenu,ThemeToggle}.test.tsx
Test Helpers __tests__/__helpers__/{navigation-mock,next-themes-mock,next-intl-mock}.ts
Dependencies package.json, yarn.lock (radix-ui added)

Test Plan

  • Header renders on all locale pages (/en, /ko, /ja, /zh-CN, /es)
  • Theme toggle switches between light, dark, and system modes
  • Language selector navigates to correct locale route
  • Mobile menu opens/closes with sheet overlay
  • Mobile menu contains nav links, theme, and language controls
  • Header is sticky with backdrop blur on scroll
  • Responsive layout: desktop nav hidden on mobile, hamburger visible
  • Keyboard navigation and accessibility (ARIA labels)
  • All unit tests pass (yarn workspace codingbuddy-landing-page test)

Closes #319

Implement responsive header navigation with:
- ThemeToggle: light/dark/system mode switching via next-themes
- LanguageSelector: 5-language locale switching via next-intl navigation
- MobileMenu: sheet-based overlay with nav links and settings
- Sticky header with backdrop blur on scroll
- i18n messages for header in all 5 locales (en, ko, ja, zh-CN, es)
- Sheet UI component from shadcn/ui (radix-ui)
- Comprehensive test coverage for all header components

Closes #319
@JeremyDev87 JeremyDev87 self-assigned this Feb 16, 2026
@JeremyDev87 JeremyDev87 added feat landing-page Landing page project tasks labels Feb 16, 2026
@JeremyDev87 JeremyDev87 changed the title feat(landing-page): add header with language selector and theme toggle add header with language selector and theme toggle Feb 16, 2026
@JeremyDev87 JeremyDev87 merged commit 895bce5 into master Feb 16, 2026
23 checks passed
@JeremyDev87 JeremyDev87 deleted the feat/319-header-theme-system branch February 16, 2026 06:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat landing-page Landing page project tasks

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Header and Theme System

1 participant