Tengo una barra lateral y alterno su visibilidad usando el enlace useCycle de Framer Motion, pero debería estar abierta de forma predeterminada en el escritorio (ancho de ventana> 480 px) y cerrada de forma predeterminada en el dispositivo móvil.

Como estoy tratando con JS, utilicé este gancho (que se encuentra en línea) para determinar el ancho de la ventana y ver si es móvil ( < 480px ) o no ( > 480px ):

 import { useEffect, useState } from "react"; export function useMediaQuery(query) { const [matches, setMatches] = useState(false); useEffect(() => { const media = window.matchMedia(query); if (media.matches !== matches) { setMatches(media.matches); } const listener = () => { setMatches(media.matches); }; media.addListener(listener); return () => media.removeListener(listener); }, [matches, query]); return matches; } export const useIsMobile = () => useMediaQuery("(max-width: 480px)");

Y así es como cambio la visibilidad de la barra lateral:

 const [sidebarIsOpen, toggleSidebar] = useCycle(true, false);

El orden de true/false es importante y define el estado inicial.

Traté de establecer el valor inicial de la visibilidad de la barra lateral usando este enlace, pero no funciona:

 const isMobile = useIsMobile(); const [sidebarIsOpen, toggleSidebar] = useCycle(isMobile, !isMobile);

¿Qué estoy haciendo mal aquí?