import { Fragment, useState, useRef, useEffect } from "react"; import type { LinkProps } from "blitz"; import { Link, Routes } from "blitz"; import { Dialog, Transition } from "@headlessui/react"; import { XIcon } from "@heroicons/react/outline"; function Header() { return (
Shellphone logo
); } type NavLinkProps = { href: LinkProps["href"]; label: string; }; function DesktopNavLink({ href, label }: NavLinkProps) { return ( {label} ); } function MobileNav() { 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 (
Shellphone
); function MobileNavLink({ href, label }: NavLinkProps) { return ( setMobileNavOpen(false)} className="flex text-gray-600 hover:text-gray-900 py-2"> {label} ); } } export default Header;