Files
caszl-next/app/components/MainNav.tsx
quantulr 7e465da9d2 update
2023-10-30 17:29:35 +08:00

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;