import { useState, useRef, useEffect, MouseEventHandler } from "react"; import { Link } from "blitz"; import { Menu, Transition } from "@headlessui/react"; function Header() { const [mobileNavOpen, setMobileNavOpen] = useState(false); const trigger = useRef(null); const mobileNav = useRef(null); // close the mobile menu on click outside useEffect(() => { const clickHandler = ({ target }: MouseEvent) => { if (!mobileNav.current || !trigger.current) { return; } console.log(mobileNav.current.contains(target as Node)); if ( !mobileNavOpen || mobileNav.current.contains(target as Node) || trigger.current.contains(target as Node) ) { return; } setMobileNavOpen(false); }; document.addEventListener("click", clickHandler); return () => document.removeEventListener("click", clickHandler); }); // close the mobile menu if the esc key is pressed useEffect(() => { const keyHandler = ({ keyCode }: KeyboardEvent) => { if (!mobileNavOpen || keyCode !== 27) return; setMobileNavOpen(false); }; document.addEventListener("keydown", keyHandler); return () => document.removeEventListener("keydown", keyHandler); }); return (
{/* Site branding */}
{/* Logo */}
{/* Desktop navigation */} {/* Mobile menu */}
{/* Hamburger button */} {/*Mobile navigation */}
); } export default Header;