54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { CloseIcon, MenuIcon } from "@/components/icons";
|
||
|
|
import { navigation } from "@/lib/content";
|
||
|
|
import { BrandMark } from "@/components/brand-mark";
|
||
|
|
|
||
|
|
export function SiteHeader() {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-50 border-b border-white/5 bg-ink/90 backdrop-blur-xl">
|
||
|
|
<div className="container-shell flex h-[70px] items-center justify-between gap-6">
|
||
|
|
<Link aria-label="返回考町科技首页" href="/" onClick={() => setOpen(false)}>
|
||
|
|
<BrandMark compact />
|
||
|
|
</Link>
|
||
|
|
<nav aria-label="主导航" className="hidden items-center gap-8 md:flex">
|
||
|
|
{navigation.map((item) => (
|
||
|
|
<Link className="text-sm text-muted transition-colors hover:text-copy" href={item.href} key={item.href}>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
<div className="hidden items-center gap-3 md:flex">
|
||
|
|
<Link className="text-sm text-muted transition-colors hover:text-copy" href="/login">
|
||
|
|
登录
|
||
|
|
</Link>
|
||
|
|
<Link className="button-primary min-h-10 px-4 py-2" href="/contact">
|
||
|
|
联系我们
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<button aria-expanded={open} aria-label={open ? "关闭导航" : "打开导航"} className="button-ghost min-h-10 p-2 md:hidden" onClick={() => setOpen((current) => !current)} type="button">
|
||
|
|
{open ? <CloseIcon /> : <MenuIcon />}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{open ? (
|
||
|
|
<div className="border-t border-line bg-panel md:hidden">
|
||
|
|
<nav aria-label="移动端主导航" className="container-shell flex flex-col gap-1 py-4">
|
||
|
|
{navigation.map((item) => (
|
||
|
|
<Link className="rounded-lg px-3 py-3 text-sm text-muted hover:bg-panel-raised hover:text-copy" href={item.href} key={item.href} onClick={() => setOpen(false)}>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
<Link className="mt-2 rounded-lg border-t border-line px-3 py-4 text-sm text-copy" href="/login" onClick={() => setOpen(false)}>
|
||
|
|
登录 / 账户入口
|
||
|
|
</Link>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|