Estructura

La lógica de un navbar es que nos permita conectar todas las páginas principales de nuestra aplicación, teniendo un espacio siempre visible desde donde el usuario puede redireccionarse.

Por tanto, tendremos elementos como el logo de nuestra tienda, las categorías de productos, y las páginas de compra y usuario:

Esta estructura indicaría que vamos a tener una etiqueta “nav” que será como el componente padre que aloje a dos hijos que serán dos etiquetas “ul”, uno para las categorías de productos y otro para las páginas de usuario y compra.

NavLink

NavLink que es parte de React Router, nos va a permitir, aparte de tener nuestra estructura de barra de navegación, crear los enlaces para redirigirnos a la página que necesitemos. Así mismo permite configurar fácilmente estilos, dependiendo del estado de cada enlace en el navbar, por ejemplo que se vea cláramente cuál es el enlace activo.

Uso de NavLink

Vamos a empezar a trabajar con componentes y para eso iremos al src y creamos una nueva carpeta Components, en ella crearemos otra carpeta para Navbar y su respectivo index.jsx. Usamos la siguiente sintaxis para importar e innvocar al NavLink:

import React from 'react'
import { NavLink } from 'react-router-dom'

const Navbar = () => {
  return (
    <nav>
        <ul>
            <li>
                <NavLink to='/'>
                    AstroPlace
                </NavLink>
            </li>
        </ul>
    </nav>
  )
}

export default Navbar

Con esta sintaxis creamos todos los elementos de la lista izquierda de categorías y derecha de opciones de compra y usuario. El nombre del redireccionamiento debe coincidir con el componente creado antes, por ejemplo:

<li>
    <NavLink to='/my-account'>
        My Account 
    </NavLink>
</li>

Con esto podemos empezar a dar estilos a nuestras listas. Un plugin interesante de VSC que nos puede ayudar en la elaboración del diseño es Tailwind CSS IntelliSense, el cual nos puede ayudar a autocompletar y sugerir estilos mientras escribimos.

Luego de tener estilizada nuestra lista tenemos que dejarle saber al usuario de alguna manera en qué categoría o pestaña se encuentra, para eso usamos otra de las propiedades de NavLink consistente en definir un estilo si la pestaña está activada y luego asignar la clase a cada ítem de nuestro Navbar que lo necesite. Solo si está activado ese ítem se activa la clase. Lo logramos de la siguiente forma:

Afuera del return definimos el estilo:

const activeStyle = 'underline underline-offset-4';

A cada ítem que lo requiera:

<li>
    <NavLink 
        to='/'
        className={({ isActive }) => 
            isActive ? activeStyle : undefined
        }
    >
        All
    </NavLink>
</li>