103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
const navLinks = [
|
|
{ label: "学习路径", href: "#roadmap" },
|
|
{ label: "工具推荐", href: "#tools" },
|
|
{ label: "精选资源", href: "#resources" },
|
|
{ label: "社区", href: "#community" },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener("scroll", onScroll);
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
scrolled
|
|
? "bg-white/80 backdrop-blur-lg shadow-sm"
|
|
: "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex h-16 items-center justify-between">
|
|
<a href="#" className="flex items-center gap-2 text-lg font-bold">
|
|
<span className="text-2xl">🌍</span>
|
|
<span className="hidden sm:inline">数字游民指南</span>
|
|
<span className="sm:hidden">DN Guide</span>
|
|
</a>
|
|
|
|
<nav className="hidden items-center gap-1 md:flex">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href="#roadmap"
|
|
className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 sm:inline-flex"
|
|
>
|
|
开始探索 →
|
|
</a>
|
|
|
|
<button
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
className="inline-flex items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 md:hidden"
|
|
aria-label="切换菜单"
|
|
>
|
|
{mobileOpen ? (
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
) : (
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileOpen && (
|
|
<div className="border-t border-slate-100 bg-white/95 backdrop-blur-lg md:hidden">
|
|
<nav className="mx-auto max-w-7xl space-y-1 px-4 py-3">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<a
|
|
href="#roadmap"
|
|
onClick={() => setMobileOpen(false)}
|
|
className="mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600"
|
|
>
|
|
开始探索 →
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|