next-cochise/src/components/HeaderNav.tsx

129 lines
4.5 KiB
TypeScript
Raw Normal View History

2025-02-06 02:44:31 +07:00
"use client";
import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement";
2025-02-11 23:59:16 +07:00
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { useEffect, useRef, useState } from "react";
2025-02-06 02:44:31 +07:00
import Link from "next/link";
export default function HeaderNav({ links, animateY = false }: any) {
2025-02-13 13:56:53 +07:00
const [isDropdownOpen] = useState([""]);
2025-02-11 23:59:16 +07:00
const dropdownRef = useRef(null);
2025-02-13 13:56:53 +07:00
// const toggleDropdown = (section: string[]) => {
// if (section == isDropdownOpen) {
// setIsDropdownOpen([""]);
// }
// setIsDropdownOpen(section);
// };
2025-02-11 23:59:16 +07:00
2025-02-06 02:44:31 +07:00
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);
};
}, []);
return (
<>
{links[0].href?.includes("/") &&
links.map((link: any, index: any) => (
<li key={index}>
{!Array.isArray(link?.child) && (
2025-02-13 21:32:58 +07:00
<Link href={link.href}>
2025-02-06 02:44:31 +07:00
{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) && (
<>
2025-02-13 13:51:36 +07:00
<Link
href={link?.href ?? "#"}
2025-02-06 02:44:31 +07:00
className="mn-has-sub"
2025-02-13 13:51:36 +07:00
// onClick={(e) => {
// e.preventDefault();
// toggleDropdown([link.text]);
// }}
2025-02-06 02:44:31 +07:00
>
{link.text} <i className="mi-chevron-down" />
2025-02-13 13:51:36 +07:00
</Link>
2025-02-06 02:44:31 +07:00
2025-02-11 23:59:16 +07:00
<ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
2025-02-06 02:44:31 +07:00
{link.child.map((subLink: any, subLinkIdx: number) => (
<li key={subLinkIdx}>
2025-02-11 23:59:16 +07:00
{!Array.isArray(subLink?.child) && (
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
{subLink?.text}
</Link>
)}
2025-02-06 02:44:31 +07:00
{Array.isArray(subLink?.child) && (
<>
2025-02-13 13:51:36 +07:00
<Link
href={subLink?.href ?? "#"}
2025-02-06 02:44:31 +07:00
className="mn-has-sub"
2025-02-13 13:51:36 +07:00
// onClick={(e) => {
// e.preventDefault();
// toggleDropdown([link.text, subLink.text]);
// }}
2025-02-06 02:44:31 +07:00
>
{subLink.text} <i className="mi-chevron-down" />
2025-02-13 13:51:36 +07:00
</Link>
2025-02-06 02:44:31 +07:00
2025-02-11 23:59:16 +07:00
<ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
2025-02-06 02:44:31 +07:00
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}>
2025-02-11 23:59:16 +07:00
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
{subLink2?.text}
</Link>
2025-02-06 02:44:31 +07:00
</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>
))}
</>
);
}