fix: header navigation

src/app/(main)/layout.tsx

@@ -15,7 +15,7 @@ import "@public/assets/css/styles.css";
 import Image from "next/image";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import { slickMultipagesDark } from "@/data/menu";
+import { navMenuData } from "@/data/menu";
 
 export default function MainLayout({
   children,
@@ -80,7 +80,7 @@ export default function MainLayout({
         <div className="theme-slick">
           <div className="page" id="top">
             <nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
-              <Header links={slickMultipagesDark} />
+              <Header links={navMenuData} />
             </nav>
             <main id="main">{children}</main>
             <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">

src/components/Header.tsx

@@ -1,5 +1,4 @@
-"use client";
-import Nav2 from "@/components/Nav";
+import HeaderNav from "@/components/HeaderNav";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Image from "next/image";
 import Link from "next/link";
@@ -37,7 +36,7 @@ export default function Header1Multipage({ links }: any) {
       <div className="inner-nav desktop-nav">
         <ul className="clearlist local-scroll">
           {/* Item With Sub */}
-          <Nav2 links={links} />
+          <HeaderNav links={links} />
           {/* End Item With Sub */}
         </ul>
         <ul className="items-end clearlist">

src/components/HeaderNav.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import addScrollspy from "@/utils/addScroll";
+import { init_classic_menu_resize } from "@/utils/menuToggle";
+import { scrollToElement } from "@/utils/scrollToElement";
+import { closeMobileMenu } from "@/utils/toggleMobileMenu";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import Link from "next/link";
+
+export default function HeaderNav({ links, animateY = false }: any) {
+  useEffect(() => {
+    setTimeout(() => {
+      scrollToElement();
+    }, 1000);
+    init_classic_menu_resize();
+    window.addEventListener("scroll", addScrollspy as any);
+
+    window.addEventListener("resize", init_classic_menu_resize);
+
+    return () => {
+      window.removeEventListener("scroll", addScrollspy as any);
+      window.removeEventListener("resize", init_classic_menu_resize);
+    };
+  }, []);
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links[0].href?.includes("/") &&
+        links.map((link: any, index: any) => (
+          <li key={index}>
+            {!Array.isArray(link?.child) && (
+              <Link className={pathname.split("/")[1] == link.href.split("/")[1] ? "active" : ""} href={link.href}>
+                {animateY ? (
+                  <span className="btn-animate-y">
+                    <span className="btn-animate-y-1">{link.text}</span>
+                    <span className="btn-animate-y-2" aria-hidden="true">
+                      {link.text}
+                    </span>
+                  </span>
+                ) : (
+                  link.text
+                )}
+              </Link>
+            )}
+
+            {Array.isArray(link?.child) && (
+              <>
+                <a
+                  href="#"
+                  className="mn-has-sub"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    // toggleDropdown();
+                  }}
+                >
+                  {link.text} <i className="mi-chevron-down" />
+                </a>
+
+                <ul className={`mn-sub to-left`}>
+                  {link.child.map((subLink: any, subLinkIdx: number) => (
+                    <li key={subLinkIdx}>
+                      {!Array.isArray(subLink?.child) && <Link href={subLink?.href}>{subLink?.text}</Link>}
+
+                      {Array.isArray(subLink?.child) && (
+                        <>
+                          <a
+                            href="#"
+                            className="mn-has-sub"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              // toggleDropdown();
+                            }}
+                          >
+                            {subLink.text} <i className="mi-chevron-down" />
+                          </a>
+
+                          <ul className={`mn-sub to-left`}>
+                            {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
+                              <li key={subLinkIdx2}>
+                                <Link href={subLink2?.href}>{subLink2?.text}</Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </li>
+        ))}
+
+      {!links[0].href?.includes("/") &&
+        links.map((link: any, index: any) => (
+          <li className="scrollspy-link" key={index}>
+            <a onClick={() => closeMobileMenu()} className="" href={link.href}>
+              {animateY ? (
+                <span className="btn-animate-y">
+                  <span className="btn-animate-y-1">{link.text}</span>
+                  <span className="btn-animate-y-2" aria-hidden="true">
+                    {link.text}
+                  </span>
+                </span>
+              ) : (
+                link.text
+              )}
+            </a>
+          </li>
+        ))}
+    </>
+  );
+}

src/components/Nav.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import addScrollspy from "@/utils/addScroll";
-import { init_classic_menu_resize } from "@/utils/menuToggle";
-import { scrollToElement } from "@/utils/scrollToElement";
-import { closeMobileMenu } from "@/utils/toggleMobileMenu";
-import { usePathname } from "next/navigation";
-import { useEffect } from "react";
-import Link from "next/link";
-
-export default function OnePageNav({ links, animateY = false }: any) {
-  useEffect(() => {
-    setTimeout(() => {
-      scrollToElement();
-    }, 1000);
-    init_classic_menu_resize();
-    window.addEventListener("scroll", addScrollspy as any);
-
-    window.addEventListener("resize", init_classic_menu_resize);
-
-    return () => {
-      window.removeEventListener("scroll", addScrollspy as any);
-      window.removeEventListener("resize", init_classic_menu_resize);
-    };
-  }, []);
-  const pathname = usePathname();
-
-  return (
-    <>
-      {links[0].href?.includes("/") &&
-        links.map((link: any, index: any) => (
-          <li key={index}>
-            <Link
-              className={
-                pathname.split("/")[1] == link.href.split("/")[1]
-                  ? "active"
-                  : ""
-              }
-              href={link.href}
-            >
-              {animateY ? (
-                <span className="btn-animate-y">
-                  <span className="btn-animate-y-1">{link.text}</span>
-                  <span className="btn-animate-y-2" aria-hidden="true">
-                    {link.text}
-                  </span>
-                </span>
-              ) : (
-                link.text
-              )}
-            </Link>
-          </li>
-        ))}
-      {!links[0].href?.includes("/") &&
-        links.map((link: any, index: any) => (
-          <li className="scrollspy-link" key={index}>
-            <a onClick={() => closeMobileMenu()} className="" href={link.href}>
-              {animateY ? (
-                <span className="btn-animate-y">
-                  <span className="btn-animate-y-1">{link.text}</span>
-                  <span className="btn-animate-y-2" aria-hidden="true">
-                    {link.text}
-                  </span>
-                </span>
-              ) : (
-                link.text
-              )}
-            </a>
-          </li>
-        ))}
-    </>
-  );
-}