Estoy creando una barra de navegación básica y quiero cambiarla según el tamaño de la pantalla. Una vez que llegue a 600 px, me gustaría ocultar los enlaces y mostrar un botón de navegación en el que se puede hacer clic que expandirá esas opciones.
Después de registrar en la consola mi lista Elementos, descubrí que el nombre de clase recibió este 'Nav_floatLeft__H1YZ8'. Entonces, en base a ese hallazgo, mi código es el siguiente. Sin embargo, mi navegación no muestra ningún cambio al hacer clic en el botón.
Estoy seguro de que React tiene una mejor manera de manejar esta situación, pero soy bastante nuevo en esto. ¿Debería usar algún tipo de gancho de estado/efecto?
Navegación:
const openCloseMenu = () => { console.log(document.getElementsByClassName(styles.floatLeft).className); let elements = document.getElementsByClassName(styles.floatLeft); if (elements.className === "Nav_floatLeft__H1YZ8"){ alert("Changed to: Menu Bar Expanded"); elements.className = styles.menuBarExpanded; } else { alert("Changed Back to: Float Left") elements.className = styles.floatLeft; } } return ( <div className={styles.topNav}> <nav> <ul className={styles.inlineListItem}> <li className={styles.floatLeft}> <Link href="/"> <a>Home</a> </Link> </li> <li className={styles.floatLeft}> <Link href="/search"> <a>Search</a> </Link> </li> <li className={styles.menuBar}> <button onClick={openCloseMenu}>Expand Nav</button> </li> </ul> </nav> </div> )CSS:
.inlineListItem{ display: inline; list-style: none; } .floatLeft{ float: left; margin: 1rem; padding-left: 1rem; text-align: center; color: white; } .floatRight{ display: inline; float: right; color: white; margin: 1rem; padding-right: 2rem; } .menuBar{ display: none; float: left; margin: 1rem; padding-left: 1rem; text-align: center; color: white; } .menuBarExpanded{ display: block; } @media screen and (max-width: 600px) { .menuBar{ display: block; } .floatLeft{ display: none; } .floatRight{ display: none; } }hay maneras de resolver este problema. Puede usar la interfaz de usuario de material. Para detectar el punto de ruptura. Me gusta para tu caso. Si desea detectar 600px. puedes hacer algo asi ---
const themeBreakpoint = theme.breakpoint.down('600px) // themeBreakpoint será verdadero por debajo de 600px.
usando esta bandera puede cambiar el estado y mostrar lo que quiera usando la representación de condiciones.
Segundo problema: puede cambiar cualquier estado según el evento onClick.
like -- const[clicked,setclicked] = useState(false)
const handleClick = (e) =>{ setclicked(true) } ahora, cuando haces que el indicador en el que se hizo clic sea verdadero, cambias tu clase css en función de ese indicador.