Crea un menú lateral con React y Tailwind

Un menú lateral expansivo es una característica muy común en los sitios web en estos días. Además de garantizar una mejor usabilidad del espacio visual disponible, su uso proporciona un acceso organizado a listados de información que solo aparecerán en pantalla cuando el usuario lo considere necesario.

En este artículo, nuestro objetivo será crear un menú con estas características, usando React como librería de desarrollo JavaScript y Tailwind CSS como herramienta de estilo. ¡Vamos!

Para empezar, ¿Qué es React?

React es un framework de JavaScript de código abierto utilizado por varias compañías gigantes como Facebook, Netflix, Instagram, etc. Enfocado en crear interfaces de usuario de una manera mucho más práctica que usar JavaScript puro, React ha ido ganando cada vez más espacio porque es fácil de asimilar, comprender y adaptar.

¿Y qué es Tailwind CSS?

Tailwind es un framework creado para optimizar el uso de CSS. En lugar de que el estilo se realice mediante etiquetas que tienen varios atributos definidos en un archivo importado con una extensión ".css", su uso elimina esta necesidad ya que cada atributo (como width, height, display o position) tiene una clase con un nombre predefinido por Tailwind y está disponible en su documentación.

Gracias a Tailwind, centrado en el desarrollo mobile-first, todo el proceso de diseño se acelera y optimiza. Además de ser intuitivo, tiene documentación fácil de aprender y de búsqueda rápida: solo ingresa el nombre del atributo (como font-size, font-weight o text-decoration) que proporciona una guía paso a paso sobre cómo usarlo con la biblioteca.

Primeiros passos com React e Tailwind

Lo primero que haremos será crear la aplicación en la que implementaremos el menú expansivo. Para esto, creemos un proyecto React e instalemos Tailwind en él. Si todo va bien, cuando reproduzcas el siguiente código en tu terminal, se abrirá en el navegador una página con el símbolo de React en movimiento:

npx create-react-app menu

cd menu

npm install

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm start

Nota: usé npm como herramienta de administración de paquetes, pero siéntete libre de usar lo que te resulte más cómodo.

Una vez instalado Tailwind, debemos configurarlo. Primero, reemplaza el contenido del archivo tailwind.config.js creado durante la instalación del framework con el código que se muestra a continuación. Esta implementación hará que Tailwind se use en todos los archivos de proyecto que tengan extensiones js, jsx, ts y tsx:

@type {import('tailwindcss').Config}

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}",

],

theme: {

extend: {},

},

plugins: [],

}

Finalmente, en el archivo css de tu proyecto, reemplaza todo el contenido existente con las siguientes oraciones (en nuestro caso, haré este proceso en el archivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Puedes probar que tu aplicación funcionó creando una clase bg-red-500 para el container principal del proyecto. Si el fondo se vuelve rojo, significa que todo salió bien y que Tailwind se instaló e implementó correctamente. De lo contrario, repite exactamente todos los pasos descritos anteriormente. Si el problema persiste, consulta el paso a paso directamente en la web de Tailwind. No olvides eliminar la clase bg-red-500 después de verificar que el uso de la biblioteca funcionó, ¿de acuerdo?

Implementando el Menu y creando un contenido

En el componente App (raíz de nuestro proyecto) crearemos uno nuevo que será nuestro menú lateral expansivo. También se creará una imagen que servirá como contenido de la página (el uso de una sola imagen como contenido es deliberado: cuantas menos complejidades innecesarias, mejor el entendimiento, ¿estás de acuerdo?).

Ten en cuenta que la imagen tiene las siguientes clases utilizadas para cambiar el estilo a través de Tailwind:

• h-screen - define la altura (height), así como la altura total de display;
• w-full - define el ancho (width) igual a 100%;
• object-cover - Define que la imagen se adaptará al tamaño disponible para ella sin distorsionarse;
• absolute - Define un posicionamiento absoluto para que la imagem quede por detrás del Menu que crearemos (en caso de no tener esta configuración, quedaría abajo del menú).

Nota: A lo largo de este artículo evitaremos volver a describir las mismas clases utilizadas por Tailwind que ya se han explicado hasta ahora.

Ahora es el momento de crear el component que llamaremos Menú. Se construirá dentro de una carpeta de components para fines de organización (en esta página almacenaremos todos los componentes que usaremos a lo largo de este proyecto). En cuanto al Menú, necesitamos implementar tres características esenciales dentro de él para lograr lo que buscamos hacer:

• Un componente que será el icono que usaremos para mostrar y ocultar el menú;
• Un estado (usaremos el hook useState para esto) que almacenará la información de que el menú estará disponible para mostrarse en la pantalla o no;
• Un componente que tendrá una lista con todos los datos existentes en el menú, que se desplegará según lo que esté almacenado en el estado creado.

Observe en la figura 2 que pasamos como propiedad a los componentes Icone y Nav (los crearemos de inmediato, no te preocupes) información importante sobre el estado de la aplicación.

Para Icone, se transfirió tanto el valor almacenado del estado visible (visivel) como el método para cambiar este estado (setVisivel). Ambos son necesarios porque, siempre que hagamos clic en el icono, utilizaremos la función de cambio de estado para cambiar su valor actual por el contrario al que tenía anteriormente (si era true, recibe el valor false; si era false, recibe el valor true).

En cuanto a Nav, solo se reenvía el valor de estado, ya que lo usaremos para permitir o no ver la lista de opciones. Observa también que, en la línea 8 de la Figura 2, hay una clase absoluta z-20 w-full en el elemento Nav. Nuevamente, está ahí porque queremos que el menú esté frente a la imagen que creamos en el componente App, con un posicionamiento absoluto y un ancho del 100 %.

Construiremos el componente Icon para que, al hacer clic, invierta el valor del estado visible (visivel) que define si se mostrará o no el menú. De esta forma, si está visible y hacemos clic en Icone, la información del menú se ocultará. De manera similar, si el menú está oculto y se hace clic en el ícono, se vuelve visible. Para ello crearemos un evento onClick en el contenedor principal del componente.

El div principal (figura 3, línea 4) posee las siguientes clases de Tailwind:

• flex - define el display del elemento como flex;
• flex-col - configura el display flex de forma que sus elementos “hijos” sean organizados verticalmente como columnas;
• fixed top-0 right-0 - Como queremos que el componente Icone esté sempre visible en la esquina superior derecha de la pantalla, utilizamos estas clases para definir el posicionamiento como fijo y la posición en relación al punto superior direcho de la pantalla;
• z-40 - Define un z-index de 40 para el elemento;
• p-5 - Crea un espaciado interno (padding) de 1.25 rem (o 20px) para el elemento.

Los divs que se crearon dentro del div principal tienen seis clases en común:

• h-1 - altura (height) de 0.25 rem (4 px);
• w-8 - ancho (width) de 2 rem (32 px);
• mb-1 - margen inferior (margin-bottom) de 0.25 rem (4 px);
• bg-white - color de fondo (background-color) blanco;
• transition - habilita transiciones para el elemento;
• duration-500 - define la duración de 500 ms para la transición.

Cada contenedor "hijo" tiene una verificación basada en el estado visible (visivel). El primero gira 45 grados y se desplaza 0,5 rem en el eje Y si el estado tiene el valor verdadero. El segundo gira -45 grados bajo las mismas condiciones y el tercero se oculta de la pantalla si el estado tiene el valor verdadero. Estas tres implementaciones juntas hacen que el ícono, que se compone de tres barras orientadas verticalmente, se convierta en una "X" cuando se hace clic.

Nota: era necesario crear una clase "rotate-_45" que sería responsable de rotar el segundo div "hijo" a "-45deg". Para ello basta con ir al archivo tailwind.config.js y crear la siguiente extensión (líneas 8 y 9 y 10):

Finalmente, creemos el componente Nav que tendrá los datos que mostraremos o no, según la interacción del usuario. Crearemos una condición que garantice que la lista solo aparecerá si el estado visible (visivel) tiene el valor verdadero.

Analicemos las clases que tiene el elemento ul:

• transition-width - crea una transición para alterar valores del atributo width (es necesario crear esta extensión en el archivo tailwind.config.js;
• font-bold - define el calibre (font-weight) del texto como 700;
• pt-20 - espaciado interno superior (padding-top) de 5 rem (80px);
• bg-half-transparent - el color de fondo será negro y parcialmente traslúcido (también deberá ser creada en el documento tailwind.config.js);
• justify-center items-center - Alinea vertical y horizontalmente el elemento al centro.

El elemento también tiene una verificación basada en el estado: siempre que el estado tenga un valor true y el elemento ul tenga un ancho de 640 px (sm), el menú tendrá un ancho de 7 rem (w-48). Si tiene un ancho inferior a este, ocupará toda la pantalla (w-full). Finalmente, si el estado tiene un valor false, tendrá un ancho de 0 y no se mostrará en la pantalla (w-0). Las extensiones requeridas en el archivo tailwind.config.js son las siguientes:

Para finalizar las explicaciones de las clases usadas con Tailwind, tenemos los elementos li (nuevamente, solo abordaremos las clases que aún no se han explicado para no extendernos demasiado):

• text-white - color de la fuente de texto (color) blanco;
• hover:text-salmon - En caso de que el usuario mueva el mouse hacia el elemento, el color del texto cambia a salmón, creado en el archivo tailwind.config.js;
• sm:w-32 - Ancho (width) igual a 8 rem (128 px), en caso de que el ancho total de la pantalla sea de 640 px (sm);
• m-1 - margen (margin) de 0.25 rem (4 px).

Si el estado tiene el valor true, los elementos li se muestran en la pantalla. De lo contrario, están ocultos.

Consideraciones finales

Esta fue una demostración básica de cómo usar React y Tailwind para hacer una funcionalidad muy común solicitada cuando actuamos como desarrolladores frontend.

A lo largo del artículo explicamos las clases de Tailwind empleadas, pero son tantas que, sin la documentación, estaríamos perdidos. Así que simplemente camina con ella bajo el brazo y todo estará bien.

¿Has tenido alguna experiencia usando React y Tailwind? ¡Cuéntame!