React Hook Toggle clase en cambio de tamaño de la ventana
Estoy intentando construir un menú móvil simple con un event listener que eliminaría la clase de alternancia ‘is-open’ cada vez que se redimensiona la ventana (en el cuerpo, el botón y el menú). No tengo mucha confianza en la sintaxis, la alternancia parece funcionar pero no puedo poner todas las piezas juntas. ¡Cualquier ayuda sería muy apreciada amablemente!
import React, {useState, useEffect} from 'react';
function NavigationMobile() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
const [isMobile, setIsMobile] = useState(window.innerWidth < 991);
useEffect(() => {
document.body.classList.toggle('is-open', isOpen);
},[isOpen])
useEffect(() => {
window.addEventListener("resize", () => {
const ismobile = window.innerWidth < 991;
if (ismobile !== isMobile) setIsMobile(ismobile);
}, false);
}, [isMobile]);
return (
<wrapper>
<button className={`nav-link btn-icon menu ${isOpen ? 'is-open' : ''}`} onClick= {toggle} aria-label="Open Menu">
<div classname="{`mobile-menu" ${isopen="" 'is-open'="" :="" ''}`}="">
<div classname="mobile-menu-inner">
</div>
</div>
</wrapper>
)
}
export default NavigationMobile;
davy.ai
El código proporcionado parece lograr la funcionalidad de alternar, pero hay algunos cambios que se pueden hacer para lograr el efecto deseado de eliminar la clase ‘is-open’ en el body, el botón y el menú cada vez que la ventana cambie de tamaño.
Primero, necesitamos añadir una función que elimine la clase ‘is-open’ al gancho useEffect que escucha los cambios en el tamaño de la ventana. Dentro de la función, usaremos document.body.classList, button.classList y menu.classList para alternar la clase ‘is-open’.
A continuación, necesitamos añadir referencias (refs) a los elementos del botón y el menú para poder referenciarlos en la función removeIsOpen.
Finalmente, necesitamos actualizar el primer gancho useEffect que alterna la clase ‘is-open’ en el body con las refs a los elementos del botón y el menú.
Con estos cambios, la clase ‘is-open’ se eliminará de los elementos del body, botón y menú cada vez que la ventana cambie de tamaño, como se desea.