56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { getNavigationMenu } from "@/services/navigation.service";
|
||
import MobileNavigation from "./MobileNavigation";
|
||
|
||
const fallbackNavItems = [
|
||
{ title: "首页", href: "/" },
|
||
{ title: "产品", href: "/products" },
|
||
{ title: "解决方案", href: "/solutions" },
|
||
{ title: "案例", href: "/cases" },
|
||
{ title: "博客", href: "/blog" },
|
||
];
|
||
|
||
export default async function Header() {
|
||
// 优先使用后台配置的主导航（apps.core.NavigationMenu，name="main"），
|
||
// 未配置或接口不可用时回退到静态导航项，保证构建/渲染始终可用。
|
||
const menu = await getNavigationMenu("main");
|
||
const navItems = menu?.items.length
|
||
? menu.items.map((item) => ({
|
||
title: item.label,
|
||
href: item.url,
|
||
newTab: item.open_in_new_tab,
|
||
}))
|
||
: fallbackNavItems.map((item) => ({ ...item, newTab: false }));
|
||
|
||
return (
|
||
<header className="sticky top-0 z-50 border-b border-slate-100 bg-white/80 backdrop-blur">
|
||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
|
||
<Link
|
||
href="/"
|
||
aria-label="世耀科技首页"
|
||
className="flex shrink-0 items-center gap-2 whitespace-nowrap text-xl font-bold text-slate-900"
|
||
>
|
||
<Image src="/brand/shiytech-icon.svg" alt="" width={40} height={40} priority />
|
||
<span>世耀科技</span>
|
||
</Link>
|
||
<nav aria-label="主导航" className="hidden items-center gap-6 md:flex lg:gap-8">
|
||
{navItems.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className="whitespace-nowrap text-slate-700"
|
||
target={item.newTab ? "_blank" : undefined}
|
||
rel={item.newTab ? "noreferrer" : undefined}
|
||
>
|
||
{item.title}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
<MobileNavigation items={navItems} />
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|