116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
|
"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>
|
||
|
))}
|
||
|
</>
|
||
|
);
|
||
|
}
|