Estoy tratando de crear una barra de navegación receptiva con un menú deslizante. Hice que todo funcionara como yo quería, excepto cuando maximicé la ventana (después de cerrar el menú deslizante).

control deslizante de menú // Navegación receptiva regular {resultado de ventana maximizado después de dejar el control deslizante de menú abierto} // Navegación receptiva {resultado de ventana maximizado después de cerrar el control deslizante de menú

 import "./App.css"; import React, { useState } from "react"; import { IconContext } from "react-icons"; import { GiHamburgerMenu } from "react-icons/gi"; import ProfileButtons from "./components/ProfileButtons"; function App() { let [isMenuOpen, setIsMenuOpen] = useState(false); let [menu, setMenu] = useState("translateX(0%)"); function openMenu() { setIsMenuOpen(!isMenuOpen); if (isMenuOpen === true) { setMenu("translateX(0%)"); } else { setMenu("translateX(-100%)"); } } return ( <div className='container'> <nav className='navigation'> <div className='navburger'> <IconContext.Provider value={{ color: "white", size: "1.2em", className: "global-class-name", }} > <GiHamburgerMenu onClick={openMenu} /> </IconContext.Provider> </div> <div className='brand'> <h2>Chubbini</h2> </div> <ul className='nav-links' style={{ transform: menu }}> <li> <a href='/a'>About</a> </li> <li> <a href='/a'>Product</a> </li> <li> <a href='/a'>Inquiries</a> </li> <li> <a href='/a'>FAQ</a> </li> <ProfileButtons /> </ul> </nav> </div> ); } export default App;

Entiendo el problema, es solo que no estoy seguro de cómo llegar a mi conclusión... a menos que haya una manera más fácil o no tenga que usar State...

¡Gracias por ayudar!