51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
![]() |
"use client";
|
||
|
import React from "react";
|
||
|
import Link from "next/link";
|
||
|
import { usePathname } from "next/navigation";
|
||
|
|
||
|
const navigations = [
|
||
|
{ title: "首页", href: "/" },
|
||
|
{ title: "机构设置", href: "/organization/overview" },
|
||
|
{ title: "人才队伍", href: "/talents/overview" },
|
||
|
{ title: "科研进展", href: "#" },
|
||
|
{ title: "科技成果", href: "#" },
|
||
|
{ title: "学术交流", href: "#" },
|
||
|
{ title: "成果转化服务", href: "#" },
|
||
|
{ title: "中科院科技资源共享平台", href: "#" },
|
||
|
{ title: "联系我们", href: "#" },
|
||
|
];
|
||
|
|
||
|
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();
|
||
|
return (
|
||
|
<nav className={"main-nav bg-[#1958a7] h-[38px]"}>
|
||
|
<ul className={"w-full h-full flex"}>
|
||
|
{navigations.map((navigation, index) => (
|
||
|
<li key={navigation.title + index}>
|
||
|
<Link
|
||
|
href={navigation.href}
|
||
|
className={`${
|
||
|
isActive(navigation.href, pathname)
|
||
|
? "text-[#dedede]"
|
||
|
: "text-white"
|
||
|
} hover:text-[#dedede] text-sm h-[38px] flex justify-center items-center min-w-[60px] mx-2.5`}
|
||
|
>
|
||
|
{navigation.title}
|
||
|
</Link>
|
||
|
</li>
|
||
|
))}
|
||
|
</ul>
|
||
|
</nav>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default MainNav;
|