"use client"; import { ChevronDown, Menu, X } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import { buttonVariants } from "@/components/ui/button"; import { navigationItems } from "@/data/navigation"; import { cn } from "@/lib/utils"; import logoImage from "../../../../public/images/TIAR.png"; export function Navbar() { const [openDropdownId, setOpenDropdownId] = useState(null); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const navigationRef = useRef(null); useEffect(() => { function handlePointerDown(event: PointerEvent) { if ( navigationRef.current && !navigationRef.current.contains(event.target as Node) ) { setOpenDropdownId(null); setIsMobileMenuOpen(false); } } function handleKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { setOpenDropdownId(null); setIsMobileMenuOpen(false); } } document.addEventListener("pointerdown", handlePointerDown); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("pointerdown", handlePointerDown); document.removeEventListener("keydown", handleKeyDown); }; }, []); function handleDropdownToggle(dropdownId: string) { setOpenDropdownId((currentId) => currentId === dropdownId ? null : dropdownId, ); } function handleMobileMenuToggle() { setIsMobileMenuOpen((isOpen) => !isOpen); setOpenDropdownId(null); } function handleNavigationLinkClick() { setOpenDropdownId(null); setIsMobileMenuOpen(false); } return ( <>
); }