()
| 20 | ]; |
| 21 | |
| 22 | export function Header() { |
| 23 | const t = useTranslations("nav"); |
| 24 | const pathname = usePathname(); |
| 25 | const locale = useLocale(); |
| 26 | const [mobileOpen, setMobileOpen] = useState(false); |
| 27 | const [dark, setDark] = useState(false); |
| 28 | const [mounted, setMounted] = useState(false); |
| 29 | |
| 30 | useEffect(() => { |
| 31 | setMounted(true); |
| 32 | setDark(document.documentElement.classList.contains("dark")); |
| 33 | }, []); |
| 34 | |
| 35 | function toggleDark() { |
| 36 | const next = !dark; |
| 37 | setDark(next); |
| 38 | document.documentElement.classList.toggle("dark", next); |
| 39 | localStorage.setItem("theme", next ? "dark" : "light"); |
| 40 | } |
| 41 | |
| 42 | function switchLocale(newLocale: string) { |
| 43 | const newPath = pathname.replace(`/${locale}`, `/${newLocale}`); |
| 44 | window.location.href = newPath; |
| 45 | } |
| 46 | |
| 47 | return ( |
| 48 | <header className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-sm"> |
| 49 | <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"> |
| 50 | <Link href={`/${locale}`} className="text-lg font-bold"> |
| 51 | Learn Claude Code |
| 52 | </Link> |
| 53 | |
| 54 | {/* Desktop nav */} |
| 55 | <nav className="hidden items-center gap-6 md:flex"> |
| 56 | {NAV_ITEMS.map((item) => ( |
| 57 | <Link |
| 58 | key={item.key} |
| 59 | href={`/${locale}${item.href}`} |
| 60 | className={cn( |
| 61 | "text-sm font-medium transition-colors hover:text-zinc-900 dark:hover:text-white", |
| 62 | pathname.includes(item.href) |
| 63 | ? "text-zinc-900 dark:text-white" |
| 64 | : "text-zinc-500 dark:text-zinc-400" |
| 65 | )} |
| 66 | > |
| 67 | {t(item.key)} |
| 68 | </Link> |
| 69 | ))} |
| 70 | |
| 71 | {/* Locale switcher */} |
| 72 | <div className="flex items-center gap-1 rounded-lg border border-[var(--color-border)] p-0.5"> |
| 73 | {LOCALES.map((l) => ( |
| 74 | <button |
| 75 | key={l.code} |
| 76 | onClick={() => switchLocale(l.code)} |
| 77 | className={cn( |
| 78 | "rounded-md px-2 py-1 text-xs font-medium transition-colors", |
| 79 | locale === l.code |
nothing calls this directly
no test coverage detected