update

app/components/MainNav.tsx

@@ -1,18 +1,42 @@
 "use client";
-import React from "react";
+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" },
-  { title: "人才队伍", href: "/talents/overview" },
-  { title: "科研进展", href: "#" },
-  { title: "科技成果", href: "#" },
-  { title: "学术交流", href: "#" },
-  { title: "成果转化服务", href: "#" },
-  { title: "中科院科技资源共享平台", href: "#" },
-  { 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 => {
@@ -25,13 +49,24 @@ const isActive = (link: string, current: string): boolean => {
 
 const MainNav = () => {
   const pathname = usePathname();
+  const [activePopup, setActivePopup] = useState(-1);
   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}>
+          <li
+            className={"relative"}
+            onMouseOver={() => {
+              setActivePopup(() => index);
+            }}
+            onMouseLeave={() => {
+              setActivePopup(() => -1);
+            }}
+            key={navigation.title + index}
+          >
             <Link
               href={navigation.href}
+              target={navigation.target}
               className={`${
                 isActive(navigation.href, pathname)
                   ? "text-[#dedede]"
@@ -40,6 +75,31 @@ const MainNav = () => {
             >
               {navigation.title}
             </Link>
+            {index === activePopup && navigation.children?.length && (
+              <div
+                className={`z-40 popup-menu min-w-[120px] absolute top-full left-1/2 -translate-x-1/2`}
+              >
+                <div
+                  className={
+                    "w-0 h-0 mx-auto 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
+                        className={
+                          "h-10 flex justify-center items-center text-[13px] px-2 hover:text-[#fe5722]"
+                        }
+                        href={child.href}
+                      >
+                        {child.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </li>
         ))}
       </ul>