Initial commit

components/Navbar/Navbar.tsx

@@ -0,0 +1,151 @@
+"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.svg"
+            alt="Logo"
+            width={160}
+            height={48}
+            priority
+            className={styles["nav-logo-image"]}
+          />
+        </Link>
+      </div>
+
+      <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>
+
+      <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="main-navigation"
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </nav>
+  );
+}