Estoy usando matchMedia en React para colapsar mi barra lateral cuando la página cambia de tamaño. Pero el problema es que si actualizo la página, mi barra lateral está abierta, no cerrada. Entonces, si quiero colapsar mi barra lateral, necesito cambiar el tamaño de la página nuevamente o usar el botón de cerrar.
const layout = document.getElementById('home-layout'); const query = window.matchMedia('(max-width: 765px)'); query.onchange = (evt) => { if( query.matches ) { changeMenuMinified(true); layout.classList.add('extended-layout'); } else { changeMenuMinified(false); layout.classList.remove('extended-layout'); } }; query.onchange(); }; useEffect(() => { window.addEventListener('resize', handleResize); });Si elimino addEventListener, funciona, puedo volver a cargar la página y mi barra lateral permanece cerrada, pero si trato de abrir la barra lateral con un botón, la barra lateral se cierra rápidamente.
const handleResize = () => { const layout = document.getElementById('home-layout'); const query = window.matchMedia('(max-width: 765px)'); query.onchange = (evt) => { if( query.matches ) { changeMenuMinified(true); layout.classList.add('extended-layout'); } else { changeMenuMinified(false); layout.classList.remove('extended-layout'); } }; query.onchange(); }; useEffect(() => { handleResize() });Algunas cosas a considerar aquí:
useEffect para evitar que su código se ejecute en cada renderizado.Puede encontrar un ejemplo de trabajo aquí -> https://codesandbox.io/s/stack-72619755-lpwh6m?file=/src/index.js:0-613
const query = window.matchMedia('(max-width: 765px)') const App = () => { const [minified, changeMenuMinified] = useState(query.matches) useEffect(() => { const resizeHandler = () => { if (query.matches) { changeMenuMinified(true) } else { changeMenuMinified(false) } } query.addEventListener("change", resizeHandler); return () => query.removeEventListener("change", resizeHandler); }) return <p>{minified ? 'minified' : 'expanded'}</p> }