basiclean-webapp/components/Navbar/Navbar.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { endLinks, singleLinks, subMenus } from "@/data/navigation";
import { useHeightVar } from "@/hooks/useHeightVar";
import { useNavToggleMenu } from "@/hooks/useNavToggleMenu";
import { useSupportsHover } from "@/hooks/useSupportsHover";
import { useToggleBodyOverflow } from "@/hooks/useToggleBodyOverflow";
import styles from "./Navbar.module.css";
import { NavbarSubMenu } from "./NavbarSubMenu";

type BasicLink = {
  label: string;
  to: string;
};

export default function Navbar() {
  const pathname = usePathname();
  const navRef = useRef<HTMLElement | null>(null);
  const supportsHover = useSupportsHover();

  const [instantSwitch, setInstantSwitch] = useState(false);
  const raf1Ref = useRef<number | null>(null);
  const raf2Ref = useRef<number | null>(null);

  const {
    menuOpen,
    openSubmenuId,
    noTransition,
    closeInstantNoAnim,
    setOpenSubmenuId,
    toggleMenu,
  } = useNavToggleMenu({ supportsHover, desktopBp: 1024 });

  useToggleBodyOverflow(menuOpen);
  useHeightVar(navRef, "--nav-h", "offset");

  useEffect(() => {
    return () => {
      if (raf1Ref.current !== null) cancelAnimationFrame(raf1Ref.current);
      if (raf2Ref.current !== null) cancelAnimationFrame(raf2Ref.current);
    };
  }, []);

  const clearInstantSwitchSoon = () => {
    if (raf1Ref.current !== null) cancelAnimationFrame(raf1Ref.current);
    if (raf2Ref.current !== null) cancelAnimationFrame(raf2Ref.current);

    raf1Ref.current = requestAnimationFrame(() => {
      raf2Ref.current = requestAnimationFrame(() => {
        setInstantSwitch(false);
        raf1Ref.current = null;
        raf2Ref.current = null;
      });
    });
  };

  const setOpenSubmenuIdWithInstantSwitch = (id: string | null) => {
    if (id !== null && openSubmenuId !== null && openSubmenuId !== id) {
      setInstantSwitch(true);
      setOpenSubmenuId(id);
      clearInstantSwitchSoon();
      return;
    }

    setInstantSwitch(false);
    setOpenSubmenuId(id);
  };

  const isActivePath = (to: string) => {
    if (to === "/") return pathname === "/";
    return pathname === to || pathname.startsWith(`${to}/`);
  };

  const handleNavLinkClick = () => {
    setInstantSwitch(false);
    closeInstantNoAnim();
  };

  const renderNavLink = (link: BasicLink) => (
    <li key={link.to + link.label}>
      <Link
        href={link.to}
        onClick={handleNavLinkClick}
        aria-current={isActivePath(link.to) ? "page" : undefined}
      >
        {link.label}
      </Link>
    </li>
  );

  return (
    <nav className={styles["nav"]} ref={navRef} aria-label="Hauptnavigation">
      <div className={styles["nav-logo"]}>
        <Link href="/" aria-label="Startseite">
          <Image
            src="/logo/logo-basiclean.svg"
            alt="Logo"
            width={160}
            height={48}
            priority
            className={styles["nav-logo-image"]}
          />
        </Link>
      </div>
      <button
        type="button"
        className={`${styles["nav-hamburger"]} ${menuOpen ? styles.open : ""}`}
        onClick={toggleMenu}
        aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
        aria-expanded={menuOpen}
        aria-controls="Hauptmenü"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ul
        id="main-navigation"
        className={[
          styles["nav-links"],
          menuOpen ? styles.open : "",
          noTransition ? styles.noTransition : "",
        ].join(" ")}
      >
        {singleLinks.map(renderNavLink)}

        {subMenus.map((menu) => (
          <NavbarSubMenu
            key={menu.id}
            id={menu.id}
            label={menu.label}
            items={menu.items}
            open={openSubmenuId === menu.id}
            noTransition={noTransition}
            instantSwitch={instantSwitch}
            setOpenSubmenuId={setOpenSubmenuIdWithInstantSwitch}
            closeInstantNoAnim={handleNavLinkClick}
          />
        ))}

        {endLinks.map(renderNavLink)}
      </ul>
    </nav>
  );
}