import { Fragment, useState, useRef, useEffect } from "react"; import { Link, type LinkProps } from "@remix-run/react"; import { Dialog, Transition } from "@headlessui/react"; import { IoClose } from "react-icons/io5"; function Header() { return (
{" "} Features{" "} {" "} Solutions{" "} {" "} Resources{" "} {" "} Pricing{" "}
); } function Headerold() { return (
Shellphone logo
); } type NavLinkProps = { to: LinkProps["to"]; label: string; }; function DesktopNavLink({ to, 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({ to, label }: NavLinkProps) { return ( setMobileNavOpen(false)} className="text-base flex text-gray-600 hover:text-gray-900"> {label} ); } } export default Headerold;