"use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { groupOffersByCategory } from "@/lib/angebote"; import { mainNav, ctaNav, siteConfig } from "@/lib/site"; import type { Offer } from "@/payload-types"; export function Navbar({ offers }: { offers: Offer[] }) { const pathname = usePathname(); const groups = groupOffersByCategory(offers); const [megaOpen, setMegaOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const [mobileAngeboteOpen, setMobileAngeboteOpen] = useState(false); const closeTimeout = useRef | null>(null); const navRef = useRef(null); // Close open menus when the route changes, adjusted during render rather // than in an effect (see https://react.dev/learn/you-might-not-need-an-effect). const [lastPathname, setLastPathname] = useState(pathname); if (pathname !== lastPathname) { setLastPathname(pathname); setMobileOpen(false); setMegaOpen(false); } useEffect(() => { document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); useEffect(() => { function onKey(e: KeyboardEvent) { if (e.key === "Escape") { setMegaOpen(false); setMobileOpen(false); } } function onClick(e: MouseEvent) { if (navRef.current && !navRef.current.contains(e.target as Node)) { setMegaOpen(false); } } document.addEventListener("keydown", onKey); document.addEventListener("mousedown", onClick); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("mousedown", onClick); }; }, []); function openMega() { if (closeTimeout.current) clearTimeout(closeTimeout.current); setMegaOpen(true); } function scheduleCloseMega() { closeTimeout.current = setTimeout(() => setMegaOpen(false), 150); } return (
{siteConfig.name.toUpperCase()}
{ctaNav.title}
{mobileOpen && ( )}
); }