Tengo un componente de Navbar de navegación donde he creado un menú de hamburguesas, cuando hago clic en el menú de hamburguesas quiero mostrar el componente de menú, que es un componente separado.
Conseguí que esto funcionara compartiendo los datos a través de accesorios.
Sin embargo, quiero que el menú desaparezca cuando haga clic fuera del contenedor o cuando haga clic en un enlace.
Hacer clic fuera del contenedor funciona con el paquete npm react-outside-click-handler pero mi menú no se cierra cuando hago clic en un enlace.
Esto es lo que tengo actualmente
// barra de navegación
export default function Navbar() { const [hamburgerOpen, setHamburgerOpen] = useState(false); const toggleHamburger = () => { setHamburgerOpen(!hamburgerOpen); } return ( <div> <div className={styles.hamburger + ' cursor-pointer'} onClick={toggleHamburger}> <span className={styles.hamburgerLine}></span> <span className={styles.hamburgerLine}></span> </div> <OutsideClickHandler onOutsideClick={() => { setHamburgerOpen(hamburgerOpen = false); }} > <Menu hamburgerStatus={hamburgerOpen} /> </OutsideClickHandler> </div> ) }// menú
export default function Menu(props) { return ( <div className={props.hamburgerStatus ? styles.menuContainer : 'hidden'}> <nav className='bg-secondary text-white w-full max-w-[440px] mt-6 absolute'> <div className=""> <div className='flex items-center rounded p-3 cursor-pointer transition-all'> <Link href="/" onClick={props.hamburgerStatus = false}> Home </Link> </div> <div className='flex items-center rounded p-3 cursor-pointer transition-all'> <Link href="/contact"> Contact </Link> </div> <div className='flex items-center rounded p-3 cursor-pointer transition-all'> <Link href="/contact"> Contact </Link> </div> </div> </nav> </div> ) } El uso onClick={props.hamburgerStatus = false} no funciona, porque los accesorios no se pueden sobrescribir.
Entonces lo que quiero es lo siguiente:
El menú de hamburguesas debe abrir el componente <Menu /> cuando el usuario hace clic en el menú de hamburguesas. Al hacer clic fuera del componente del menú o en un enlace, se debe cerrar el menú.
¿Cómo puedo hacer que esto funcione en React?
Para cerrar el menú al hacer clic en un enlace/navegar a otra página, puede agregar un oyente en el evento routeChangeStart del next/router y establecer la variable de estado hamburgerOpen en false cuando se activa. Esto garantiza que el menú siempre se cierre en las navegaciones del lado del cliente.
import { useRouter } from 'next/router'; export default function Navbar() { const router = useRouter(); const [hamburgerOpen, setHamburgerOpen] = useState(false); const closeHamburger = () => { setHamburgerOpen(false); }; useEffect(() => { router.events.on('routeChangeStart', closeHamburger); return () => router.events.off('routeChangeStart', closeHamburger); }, [router.events]); // Rest of the component's code }