You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.3 KiB
97 lines
3.3 KiB
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import type { NavItem } from "../types";
|
|
import { LangSwitch } from "./LangSwitch";
|
|
|
|
export interface MainNavProps {
|
|
items: NavItem[];
|
|
basePath?: string; // e.g. /zh-CN
|
|
locale?: string; // zh-CN | en
|
|
}
|
|
|
|
export function MainNav({ items, basePath = "", locale = "zh-CN" }: MainNavProps) {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const text = {
|
|
searchPlaceholder: locale === "en" ? "Search products/content" : "搜索产品/内容",
|
|
cart: locale === "en" ? "Cart" : "购物车",
|
|
} as const;
|
|
|
|
return (
|
|
<header className="w-full bg-white border-b border-gray-100 relative">
|
|
<div className="mx-auto max-w-screen-2xl px-4 h-16 flex items-center justify-between">
|
|
<a href="/" className="font-semibold text-gray-900 text-lg">LOG</a>
|
|
|
|
{/* PC端导航菜单 */}
|
|
<nav className="hidden md:flex items-center gap-6">
|
|
{items.map((item) => (
|
|
<a key={item.label} href={`${basePath}${item.href}`} className="text-gray-700 hover:text-gray-900">
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
{/* PC端搜索框 */}
|
|
<input
|
|
type="search"
|
|
placeholder={text.searchPlaceholder}
|
|
className="hidden md:block w-64 max-w-full rounded border border-gray-200 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
|
|
/>
|
|
<a href={`${basePath}/cart`} className="text-gray-700 hover:text-gray-900">{text.cart}</a>
|
|
<LangSwitch />
|
|
|
|
{/* 移动端菜单按钮 */}
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="md:hidden p-2 text-gray-700 hover:text-gray-900 focus:outline-none"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
{mobileMenuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 移动端导航菜单 */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden bg-white border-t border-gray-100">
|
|
<nav className="mx-auto max-w-screen-2xl px-4 py-4 space-y-2">
|
|
{/* 移动端搜索框 */}
|
|
<input
|
|
type="search"
|
|
placeholder={text.searchPlaceholder}
|
|
className="w-full rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
|
|
/>
|
|
{/* 导航项 */}
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.label}
|
|
href={`${basePath}${item.href}`}
|
|
className="block py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded px-2"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
|
|
|