Controlar la visibilidad de elementos en una interfaz es una de las tareas más comunes al construir aplicaciones con React. Aquí se aborda cómo implementar un toggle de menú utilizando el hook useState, combinando lógica de estado con estilos CSS para lograr un resultado funcional y limpio.
¿Cómo funciona useState para controlar la visibilidad de un menú?
Antes de crear el toggle, es importante preparar el terreno. Se limpia el componente eliminando elementos de pruebas anteriores y dejando un arreglo vacío como valor inicial [0:20]. Más adelante, cuando la aplicación se conecte con una API, este arreglo se populará con datos reales.
El trabajo principal ocurre en el componente header, donde se importa useState y se define la estructura del estado [1:06]:
jsx
const [toggle, setToggle] = useState(false);
- toggle: almacena el valor actual del estado, un booleano que indica si el menú es visible o no.
- setToggle: es la función que modifica ese estado.
- El valor inicial es
false, lo que significa que el menú no se muestra al cargar la página.
Este patrón de desestructuración con dos valores es la base de useState en React: el primer elemento es el dato almacenado y el segundo es el mecanismo para actualizarlo.
¿Qué hace la función handleToggle?
Para invertir el valor del estado cada vez que el usuario hace clic, se crea una función auxiliar [2:10]:
jsx
const handleToggle = () => {
setToggle(!toggle);
};
El operador de negación (!) convierte false en true y viceversa. Cada clic alterna el estado: si estaba oculto, se muestra; si estaba visible, se oculta. Este comportamiento se mantiene mientras la aplicación no recargue la página por completo, ya que el estado persiste entre renders pero se reinicia con un reload total.
¿Cómo se conecta el evento onClick con el toggle?
El elemento que dispara la acción es el ítem del navbar que representa al usuario logueado [3:22]:
jsx
<li
className="navbar-email"
onClick={handleToggle}
>
usuario@ejemplo.com
</li>
Un detalle relevante es la legibilidad del código. Separar los atributos en líneas distintas facilita la lectura cuando una etiqueta acumula varias propiedades. Recordemos: escribimos código para humanos.
¿Cómo se renderiza condicionalmente el componente menú?
Primero se importa el componente Menu utilizando un alias de rutas [4:30]:
jsx
import Menu from '@components/Menu';
Este componente contiene opciones como my orders, my account y cerrar sesión. Para mostrarlo solo cuando el estado lo permita, se usa renderizado condicional con el operador lógico && dentro de llaves (handlebars) [5:02]:
jsx
{toggle && <Menu />}
- Si
toggle es false, React ignora lo que viene después del && y no renderiza nada.
- Si
toggle es true, React renderiza el componente <Menu />.
Las llaves {} dentro del JSX son fundamentales: indican que el contenido es una expresión de JavaScript evaluada dentro del HTML.
¿Cómo posicionar el menú flotante con CSS?
Al activar el toggle por primera vez, el menú aparece pero desplaza el contenido porque sigue anclado al flujo normal del documento [5:50]. Para corregirlo, se aplican propiedades CSS sobre el componente menú [6:30]:
css
.menu {
position: absolute;
top: 60px;
right: 50px;
}
- position absolute: desancla el elemento del flujo del documento y lo posiciona respecto a su contenedor más cercano con posición relativa.
- top 60px: lo desplaza hacia abajo lo suficiente para que no se superponga con la barra del header.
- right 50px: lo alinea hacia la derecha del documento.
El valor por defecto de la propiedad position es static (no relative como se menciona coloquialmente). Cambiar a absolute permite mover el elemento con las propiedades top, bottom, left y right sin afectar a los demás elementos de la página.
Con estos cambios aplicados, al hacer clic en el usuario el menú aparece flotando en la posición deseada [7:15]. Cada clic adicional lo oculta o lo muestra de forma consistente.
Queda como reto optimizar el posicionamiento para que funcione correctamente en diseño responsive y en diferentes resoluciones de pantalla. ¿Qué solución propondrías para manejar estos casos? Comparte tu enfoque.
