0
66
VisualizaçõesLos menús no se muestran en la pantalla del escritorio
Obtengo state=false en el tamaño del escritorio cuando no hay una opción de alternar, ya que inicialmente se define como falso. Debido a esto, no se muestran los menús. Quiero esta funcionalidad solo cuando el sitio web se abre en un dispositivo móvil, no en una computadora de escritorio.
const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const toggle = () => setIsMenuOpen(!isMenuOpen); const ref = useRef(); useEffect(() => { const checkIfClickedOutside = (e) => { if (!ref.current?.contains(e.target)) { setIsMenuOpen(false); } }; document.addEventListener("mousedown", checkIfClickedOutside); return () => { document.removeEventListener("mousedown", checkIfClickedOutside); }; }, []); return ( <> <header> <nav> <div className="nav"> <div className="nav-brand"> <Link to="./" className="text-black"> Website </Link> </div> <div ref={ref}> // <-- ref to this containing div <div className="toggle-icon" onClick={toggle}> <i id="toggle-button" className={isMenuOpen ? "fas fa-times" : "fas fa-bars"} /> </div> {isMenuOpen && ( <div className={isMenuOpen ? "nav-menu visible" : "nav-menu"}> .... </div> )} </div> </div> </nav> </header> </> ); }; 
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Cree un valor de estado inicial que verifique si el ancho de la ventana es mayor que el tamaño de su consulta de medios móviles.
* Small devices (landscape phones, less than 768px) */ @media only screen and (max-width: 767.98px) { /* -------------Bottom Header------------- */ ..... }Ejemplo:
const isMobile = window.innerWidth <= 767.98; export default function App() { const [isMenuOpen, setIsMenuOpen] = useState(!isMobile); const toggle = () => isMobile && setIsMenuOpen(!isMenuOpen); const ref = useRef(); useEffect(() => { if (isMobile) { const checkIfClickedOutside = (e) => { if (!ref.current?.contains(e.target)) { setIsMenuOpen(false); } }; document.addEventListener("mousedown", checkIfClickedOutside); return () => { // Cleanup the event listener document.removeEventListener("mousedown", checkIfClickedOutside); }; } }, []); return ( .... ); }
Esto, OFC, asume que la ventana gráfica de la aplicación es estática. Si necesita una respuesta dinámica, use un gancho useEffect para agregar un controlador de eventos onResize al objeto de la window .
Ejemplo:
useEffect(() => { const resizeHandler = () => { ... logic to get window size and handle setting the menu state }; window.addEventListener("resize", resizeHandler); return () => { window.removeEventListener("resize", resizeHandler); }; }, []);
·
Juan Pablo Isaza
Relatório
Responde à pergunta