Hice un useState booleano para alternar, así que puse la función de alternar en un Onclick={} colocado en el menú de hamburguesas y luego hice un cambio dinámico en el nombre de clase basado en el boolen, pero aunque la alternancia funciona bien cuando hago clic en el menú hambuerguer, los enlaces de navegación que muestran y ocultan simplemente no hacen nada, así que me preguntaba por qué className no está haciendo lo que se supone que debe hacer. Aquí está mi código, cualquier ayuda será muy apreciada.

 const [showNav, setShowNav] = useState(false) const openMenu = () =>{ setShowNav(!showNav) console.log(showNav) } <nav className='app__nav' id={showNav? 'hidden':''} > <img className="nav__close-btn" src={closeButton} alt="close-menu"/> <ul> <li><Link className="nav__link" to='#'>Alumnos</Link></li> <li><Link className="nav__link" to='#'>Voluntarios</Link></li> <li><Link className="nav__link" to='#'>Nosotros</Link></li> </ul> </nav>

Y aquí está el css

 .app__header .app__nav{ position: fixed; right: 0; top: 0; background-color:white; height: 100vh; width: 50%; z-index: 2; text-transform:uppercase; transform: translateX(100%); transition: 0.5s ease-in-out; } .app__header .app__nav #hidden{ transform: translateX(0%); /* transition: 0.5s ease-in-out; */ }

Espero que puedas decirme qué está mal, ¡gracias!