Navbar

• Indicando ruta activa

src\components\shared\Navbar.astro

---
const links = [
  { name: "Inicio", href: "/" },
  { name: "Paginado", href: "/pokemon/1" },
  { name: "Favoritos", href: "/favorites" },
];

const currentPath = Astro.url.pathname;
---

<nav class="shadow bg-slate-900">
  <div
    class="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"
  >  

    {
      links.map(({ href, name }) => (
        <div>
          <a
            {href}
            class="text-gray-800 dark:text-gray-200 mx-1.5 sm:mx-6",
          >
            {name}
          </a>
          {
            currentPath === href ? (
              <div transition:name="menu-line" class="border-b-2 border-blue-500 mx-4"/>
            ) :
            (
              <div class="border-b-2 border-transparent"/>
            )
          }
        </div>
      ))
    }
  </div>
</nav>

• Indicando ruta activa
• No muestra la animación al cambiar de página

{
  links.map(({ href, name }) => (
    <a
      {href}
      class:list={[
        "text-gray-800 dark:text-gray-200 mx-1.5 sm:mx-6",
        {
          "border-b-2 border-blue-500": currentPath === href,
        },
      ]}
    >
    {name}
    </a>
  ))
}