"use client"; import React, { useState, useEffect } 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 [currentPath, setCurrentPath] = useState(""); useEffect(() => { const updatePath = () => { setCurrentPath(window.location.pathname); }; updatePath(); // 监听浏览器前进/后退 window.addEventListener("popstate", updatePath); // 监听点击事件（处理 Next.js 客户端导航） const handleClick = (e: MouseEvent) => { const target = e.target as HTMLElement; const link = target.closest("a"); if (link && link.href) { setTimeout(() => { updatePath(); }, 100); } }; document.addEventListener("click", handleClick); return () => { window.removeEventListener("popstate", updatePath); document.removeEventListener("click", handleClick); }; }, []); const brandFull = locale === "en" ? "SensiGuard Technologies" : "衡感智能"; const isActive = (href: string) => { if (!currentPath) return false; if (href.startsWith("#")) return false; const fullPath = `${basePath}${href}`; // 首页匹配 if (href === "/" || href === "") { return currentPath === basePath || currentPath === `${basePath}/`; } // 精确匹配或作为路径前缀匹配 return currentPath === fullPath || currentPath.startsWith(`${fullPath}/`); }; return (
{brandFull} {/* PC端导航菜单 */}
{/* 移动端菜单按钮 */}
{/* 移动端导航菜单 */} {mobileMenuOpen && (
)}
); }