app-261004/components/layout/site-header.tsx

"use client";

import { useEffect, useState } from "react";
import { Link, usePathname } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { LocaleSwitcher } from "./locale-switcher";

const NAV_ITEMS = [
	{ href: "/", key: "home" },
	{ href: "/about", key: "about" },
] as const;

/**
 * 站点头部导航。
 *
 * DESIGN.md：粘性白色导航条，高度约 64px，底部分割线 1px hairline-soft。
 * 桌面端横向展示链接与 CTA；移动端（<1024px）折叠为抽屉菜单。
 */
export function SiteHeader() {
	const t = useTranslations("Nav");
	const pathname = usePathname();
	const [menuOpen, setMenuOpen] = useState(false);
	const shouldReduceMotion = useReducedMotion();

	// 菜单打开时锁定页面滚动（与外部系统 document.body 同步）
	useEffect(() => {
		if (!menuOpen) {
			return;
		}

		const original = document.body.style.overflow;
		document.body.style.overflow = "hidden";

		return () => {
			document.body.style.overflow = original;
		};
	}, [menuOpen]);

	const isActive = (href: string) =>
		href === "/" ? pathname === "/" : pathname.startsWith(href);

	return (
		<header className="sticky top-0 z-40 border-b border-hairline-soft bg-canvas/85 backdrop-blur-md">
			<div className="mx-auto flex h-16 w-full max-w-[1280px] items-center justify-between gap-md px-lg sm:px-xxl">
				{/* 品牌标识 */}
				<Link
					href="/"
					className="flex items-center gap-xs text-body-md font-semibold text-ink"
					aria-label={t("home")}
				>
					<span
						aria-hidden="true"
						className="grid size-7 place-items-center rounded-md bg-primary font-mono text-caption font-semibold text-brand-green"
					>
						&gt;_
					</span>
					<span className="hidden sm:inline">个人博客</span>
				</Link>

				{/* 桌面端导航 */}
				<nav
					aria-label={t("home")}
					className="hidden items-center gap-xxs md:flex"
				>
					{NAV_ITEMS.map((item) => (
						<Link
							key={item.href}
							href={item.href}
							aria-current={isActive(item.href) ? "page" : undefined}
							className={cn(
								"rounded-full px-md py-xs text-body-sm transition-colors duration-150",
								isActive(item.href)
									? "font-medium text-ink"
									: "text-steel active:bg-surface",
							)}
						>
							{t(item.key)}
						</Link>
					))}
				</nav>

				<div className="flex items-center gap-xxs">
					<LocaleSwitcher />

					{/* GitHub 入口（桌面端） */}
					<a
						href="https://github.com"
						target="_blank"
						rel="noopener noreferrer"
						className="hidden h-9 items-center rounded-full bg-primary px-lg text-button-md text-on-primary transition-colors duration-150 active:bg-charcoal md:inline-flex"
					>
						GitHub
					</a>

					{/* 移动端菜单开关 */}
					<button
						type="button"
						onClick={() => setMenuOpen((value) => !value)}
						aria-expanded={menuOpen}
						aria-controls="mobile-navigation"
						aria-label={menuOpen ? t("closeMenu") : t("openMenu")}
						className="grid size-10 place-items-center rounded-full text-ink transition-colors duration-150 active:bg-surface md:hidden"
					>
						{menuOpen ? (
							<X className="size-5" aria-hidden="true" />
						) : (
							<Menu className="size-5" aria-hidden="true" />
						)}
					</button>
				</div>
			</div>

			{/* 移动端抽屉 */}
			<AnimatePresence>
				{menuOpen ? (
					<motion.nav
						id="mobile-navigation"
						aria-label={t("home")}
						initial={shouldReduceMotion ? false : { opacity: 0, height: 0 }}
						animate={{ opacity: 1, height: "auto" }}
						exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, height: 0 }}
						transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
						className="overflow-hidden border-t border-hairline-soft bg-canvas md:hidden"
					>
						<ul className="flex flex-col px-lg py-sm sm:px-xxl">
							{NAV_ITEMS.map((item) => (
								<li key={item.href}>
									<Link
										href={item.href}
										// 点击后立即收起抽屉，避免依赖路由变化的副作用
										onClick={() => setMenuOpen(false)}
										aria-current={isActive(item.href) ? "page" : undefined}
										className={cn(
											// 触控目标 ≥ 44px
											"flex min-h-11 items-center rounded-md px-sm text-body-md transition-colors duration-150",
											isActive(item.href)
												? "font-medium text-ink"
												: "text-steel active:bg-surface",
										)}
									>
										{t(item.key)}
									</Link>
								</li>
							))}
						</ul>
					</motion.nav>
				) : null}
			</AnimatePresence>
		</header>
	);
}