117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
"use client";
|
|
import { navigations as orgNavigations } from "@/app/(introduce)/organization/(generally)/config";
|
|
import { navigations as achieveNavigations } from "@/app/(introduce)/achievements-transformation/config";
|
|
import { navigations as talentsNavigations } from "@/app/(introduce)/talents/config";
|
|
import { navigations as academyNavigations } from "@/app/(articles)/academic-exchange/academic-events/pages/[pageIndex]/config";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
const navigations = [
|
|
{ title: "首页", href: "/" },
|
|
{
|
|
title: "机构设置",
|
|
href: "/organization/overview",
|
|
children: orgNavigations,
|
|
},
|
|
{
|
|
title: "人才队伍",
|
|
href: "/talents/overview",
|
|
children: talentsNavigations,
|
|
},
|
|
{ title: "科研进展", href: "/research-progress/pages/1" },
|
|
{ title: "科技成果", href: "/technological-achievements/pages/1" },
|
|
{
|
|
title: "学术交流",
|
|
href: "/academic-exchange/academic-events/pages/1",
|
|
children: academyNavigations,
|
|
},
|
|
{
|
|
title: "成果转化服务",
|
|
href: "/achievements-transformation/government-policy",
|
|
children: achieveNavigations,
|
|
},
|
|
{
|
|
title: "中科院科技资源共享平台",
|
|
href: "https://casshare.com/experts/index.jsp",
|
|
target: "_blank",
|
|
},
|
|
{ title: "联系我们", href: "/contact-us" },
|
|
];
|
|
|
|
const isActive = (link: string, current: string): boolean => {
|
|
if (link === current) return true;
|
|
if (link === "/") return false;
|
|
const link_0 = link.split(/\/+/).filter(Boolean)[0];
|
|
const current_0 = current.split(/\/+/).filter(Boolean)[0];
|
|
return link_0 === current_0;
|
|
};
|
|
|
|
const MainNav = () => {
|
|
const pathname = usePathname();
|
|
const [activePopup, setActivePopup] = useState(-1);
|
|
return (
|
|
<nav className={"main-nav h-[38px] bg-[#1958a7]"}>
|
|
<ul className={"flex h-full w-full"}>
|
|
{navigations.map((navigation, index) => (
|
|
<li
|
|
className={"relative"}
|
|
onMouseOver={() => {
|
|
setActivePopup(() => index);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setActivePopup(() => -1);
|
|
}}
|
|
key={navigation.title + index}
|
|
>
|
|
<Link
|
|
onClick={() => {
|
|
setActivePopup(() => -1);
|
|
}}
|
|
href={navigation.href}
|
|
target={navigation.target}
|
|
className={`${
|
|
isActive(navigation.href, pathname)
|
|
? "text-[#dedede]"
|
|
: "text-white"
|
|
} mx-2.5 flex h-[38px] min-w-[60px] items-center justify-center text-sm hover:text-[#dedede]`}
|
|
>
|
|
{navigation.title}
|
|
</Link>
|
|
{index === activePopup && navigation.children?.length && (
|
|
<div
|
|
className={`popup-menu absolute left-1/2 top-full z-40 min-w-[120px] -translate-x-1/2`}
|
|
>
|
|
<div
|
|
className={
|
|
"mx-auto h-0 w-0 border-b-[12px] border-l-[12px] border-r-[12px] border-b-[#b0d3eb] border-l-transparent border-r-transparent"
|
|
}
|
|
></div>
|
|
<ul className={"whitespace-nowrap bg-[#b0d3eb]"}>
|
|
{navigation.children.map((child) => (
|
|
<li key={child.href}>
|
|
<Link
|
|
onClick={() => {
|
|
setActivePopup(() => -1);
|
|
}}
|
|
className={
|
|
"flex h-10 items-center justify-center px-2 text-[13px] hover:text-[#fe5722]"
|
|
}
|
|
href={child.href}
|
|
>
|
|
{child.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default MainNav;
|