next-cochise/src/components/HeaderNav.tsx

"use client";

import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement";
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";

export default function HeaderNav({ links, animateY = false }: any) {
  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
  const dropdownRef = useRef(null);

  const toggleDropdown = (section: string[]) => {
    if (section == isDropdownOpen) {
      setIsDropdownOpen([""]);
    }
    setIsDropdownOpen(section);
  };

  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]);
                  }}
                >
                  {link.text} <i className="mi-chevron-down" />
                </a>

                <ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
                  {link.child.map((subLink: any, subLinkIdx: number) => (
                    <li key={subLinkIdx}>
                      {!Array.isArray(subLink?.child) && (
                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
                          {subLink?.text}
                        </Link>
                      )}
                      {Array.isArray(subLink?.child) && (
                        <>
                          <a
                            href="#"
                            className="mn-has-sub"
                            onClick={(e) => {
                              e.preventDefault();
                              toggleDropdown([link.text, subLink.text]);
                            }}
                          >
                            {subLink.text} <i className="mi-chevron-down" />
                          </a>

                          <ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
                            {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
                              <li key={subLinkIdx2}>
                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
                                  {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>
        ))}
    </>
  );
}