Crear barra de navegación responsiva con TailwindCSS y React con NextJS13

Cómo crear una barra de navegación responsiva con TailwindCSS y React con NextJS13

Podrás ver y utilizar el código fuente de esta entrada del blog en github: https://github.com/gersonja/mynextapp.

Aprenda a crear una barra de navegación compatible con dispositivos móviles utilizando TailwindCSS y React con NextJS13.

¿Está cansado de luchar para crear una barra de navegación visualmente agradable y funcional para su sitio web? ¡No busque más! En esta guía, descubriremos la forma más sencilla de crear una barra de navegación receptiva utilizando el poder de TailwindCSS y React.

La barra de navegación es un componente crucial de cualquier sitio web, ya que sirve como un centro de navegación para que los visitantes accedan fácilmente a diferentes páginas y secciones del sitio. A menudo se coloca en la parte superior de la página y puede incluir enlaces, menús desplegables e incluso funciones de búsqueda. Pero crear una barra de navegación puede ser una tarea desalentadora para algunos, especialmente si eres nuevo en el desarrollo web.

TailwindCSS es un marco de CSS popular que prioriza la utilidad y que facilita la creación de diseños responsivos y consistentes, y con React podemos agregar funcionalidad dinámica a nuestra barra de navegación.

Empecemos.

Configuración del entorno de desarrollo

Cuando desee utilizar o emplear TailwindCSS dentro de una aplicación React, primero debe instalarla y configurarla.

1. Primero, cree una aplicación React con Nextjs.
   
   Utilizando la terminal, ubicarse en la carpeta principal donde se quiere alojar la aplicación, y ejecutar el comando: "npx create-next-app".
   
   A continuación en la terminal le solicitarán las siguientes indicaciones, a las cuales responderá:
   
   What is your project named? mynextapp
   Would you like to add TypeScript with this project? N
   Would you like to use ESLint with this project? Y
   Would you like to use Tailwind CSS with this project? Y
   Would you like to use the `src/ directory` with this project? N
   Would you like to use experimental `app/` directory with this project? Y
   What import alias would you like configured? `@/*
   
   Al terminar este proceso, se instalarán las dependencias y se configurará el proyecto en una carpeta nombrada con el nombre del proyecto.
   
   Entrar a la carpeta creada: cd mynextapp
   
   
2. Luego, instale TailwindCSS usando el comando: "npm install -D tailwindcss postcss autoprefixer", toma en cuenta que con este comando también se instalarán otras dependencias necesarias, como "postcss" y "autoprefixer".
   
   
3. Cree archivos de configuración ejecutando el comando: "npx tailwindcss init -p", este comando creará los archivos de configuración necesarios: `tailwind.config.js` y `postcss.config.js`.
   
   En este momento ya hay que comenzar a editar los archivos de configuración del proyecto. Es por ello que debe comenzar con su editor favorito, en este caso utilizaremos visual studio code desde la línea de comandos en el directorio, con el comando: code .
   
   Añadir los directorios a los archivos que utilizaran TailwindCSS en el archivo de configuración `tailwind.config.js`, quedando de la siguiente manera:
   
   /** @type {import('tailwindcss').Config} */

module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
};
   
   A continuación, pegue el siguiente fragmento de código al principio del archivo app/globals.css:
   
   
   @tailwind base;
@tailwind components;
@tailwind utilities;
    
   Observación: El archivo globals.css contiene los estilos que se utilizarán en la aplicación, si bien puede dejar estos estilos, también es recomendable eliminarlos, ya que a partir de ahora se aplicarán solamente los estilos con tailwindcss.
   
   
4. Por último, verificar que los estilos estén dentro del archivo app/layout.js. Verificar que estén los estilos importados: import ‘./globals.css’;
   
   Esta configuración de los estilos, debe verificarse en todas las rutas.

Hemos concluido con la creación del proyecto nextjs 13 y con la configuración de tailwindcss.

Preparando el componente principal de la aplicación

Al crear una aplicación con `npm create-next-app` con el directorio app experimental, predeterminadamente el archivo page.js incluye código demo, el cual hay que eliminar para comenzar. La `export default function Home()` hay que borrar todo el contenido de la etiqueta `<main />’ y podemos colocar un `<h1>Página principal</h>` dentro de la misma.

Creando componente para la barra de navegación

Dentro de la carpeta app, creamos una nueva carpeta denominada `components`, es aquí donde vamos crear todos los componentes de la aplicación, comenzando con el archivo: Navegacion.js.

Creación de una barra de navegación responsiva simple

De forma predeterminada, TailwindCSS utiliza un enfoque móvil primero para los puntos de interrupción, similar a otros marcos populares como Bootstrap.

Esto significa que cuando diseñamos para diferentes tamaños de pantalla, las propiedades predeterminadas, como flex, se aplicarán a todos los tamaños de pantalla, mientras que las propiedades de punto de interrupción, como "md:flex-row", solo tendrán efecto en la pantalla mediana y por encima de ella. tamaño (768px) punto de interrupción.

En el archivo Navegacion.js, vamos a incluir el siguiente código:
import Link from "next/link";

export default function Navegacion() {
return (
<div className="container mx-auto flex flex-wrap p-5 flex-col items-center">
<Link href="#" class="flex title-font font-medium items-center text-gray-900 mb-4">
<p>Menú</p>
</Link>
<div className="flex flex-wrap items-center text-base justify-center">
<Link href="#" className="mr-5">Primer Link</Link>
<Link href="#" className="mr-5">Segundo Link</Link>
<Link href="#" className="mr-5">Tercer Link</Link>
<Link href="#" className="mr-5">Cuarto Link</Link>
</div>
<button className="inline-flex items-center bg-yellow-500 border-0 py-1 px-3 mt-4">Click</button>
</div>
)
}
Aquí, al agregar propiedades TailwindCSS, hemos creado una barra de navegación simple.

La mayor parte del código anterior tendrá sentido si está familiarizado con las propiedades de CSS. En resumen, hemos creado un contenedor, agregado un margen automático a lo largo del eje x y algunas otras propiedades como una columna flexible, centro de elementos, etc.

Debido a esto, las etiquetas de ancla, div y botón se organizan automáticamente en filas distintas utilizando el atributo flex-col predeterminado de la barra de navegación.

Este componente debemos importarlo en el archivo app/layout.js y para que sea visible, debemos añadirlo dentro de la sentencia return de la función, cuidando que esté por encima del `{children}`.

Se verá así:

Sin embargo, ¿qué hay de la vista de escritorio? También se podrá acceder a la misma vista en el escritorio porque no hemos introducido ninguna consulta de medios.

Y aquí es donde los puntos de interrupción de TailwindCSS son útiles.

Con la ayuda de estos puntos de interrupción, se ha vuelto mucho más simple crear diseños receptivos.

Digamos que el tamaño de la pantalla es >= 768px, queremos organizar todos los elementos de la barra de navegación en una sola fila. Para eso, podemos usar "md:flex-row" en tal situación. Con esto, el elemento de la barra de navegación se colocará en una sola fila siempre que el tamaño de la pantalla alcance los 768 px como resultado de esta propiedad.

Aquí está el código para eso.
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<Link href="#" class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<p>Menú</p>
</Link>
<div className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<Link href="#" className="mr-5">Primer Link</Link>
<Link href="#" className="mr-5">Segundo Link</Link>
<Link href="#" className="mr-5">Tercer Link</Link>
<Link href="#" className="mr-5">Cuarto Link</Link>
</div>
<button className="inline-flex items-center bg-yellow-500 border-0 py-1 px-3 mt-4 md:mt-0">Click</button>
</div>
Similar a "md:flex-row", hemos incluido algunas propiedades de punto de interrupción relacionadas como:

“md:mb-0”:- Dado que en el tamaño de pantalla de 768 píxeles y más, cada elemento se coloca en una sola fila, por lo que no es necesario agregar un margen inferior.

“md:ml-auto md:mr-auto”:- Para agregar espacio entre los enlaces en los lados izquierdo y derecho.

“md:mt-0”: - Después de que la pantalla tenga 768 px o más, establezca el margen superior en 0 para el botón.

Aquí está la salida:



Hasta aquí dejaremos por ahora, lo de la creación de una barra simple de navegación responsiva.

Continuaré ampliando este desarrollo e ir mejorando la barra de navegación.