Dynamic nav links

src/components/Header.astro

@@ -1,142 +1,73 @@
 ---
+import NavLink from './NavLink.astro'
+import { links } from '../consts/links'
+
 const { pathname } = Astro.url
 
 // Lista de rutas donde NO debe aparecer el logo
 const hideLogoRoutes = ['/']
 const shouldShowLogo = !hideLogoRoutes.includes(pathname)
-
-// Comprueba si la ruta actual está activa
-const isActive = (path: string) => pathname === path
 ---
 
-<div class="fixed top-8 right-8 z-[100] md:hidden">
-  <button
-    id="menuButton"
-    aria-expanded="false"
-    aria-controls="menuMobileContent"
-    class="hamburgerButton group relative flex h-[20px] w-6 cursor-pointer flex-col items-center justify-between transition duration-300 hover:scale-110 lg:hidden"
-    aria-label="Abrir menú de navegación"
+<header class="fixed top-0 z-50 mx-auto flex h-20 w-full items-center rounded-b-md text-white">
+  <nav
+    class:list={[
+      shouldShowLogo ? 'grid-cols-3' : 'grid-cols-2',
+      'mx-auto grid w-full max-w-6xl items-center justify-between px-6 text-sm font-medium',
+    ]}
   >
-    <span
-      class="ease h-[2px] w-6 transform bg-gray-300 transition duration-300 group-[.open]:translate-y-2 group-[.open]:rotate-45"
-    ></span>
-    <span
-      class="ease h-[2px] w-6 transform bg-gray-300 transition duration-300 group-[.open]:opacity-0"
-    ></span>
-    <span
-      class="ease h-[2px] w-6 transform bg-gray-300 transition duration-300 group-[.open]:opacity-0"
-    ></span>
-    <span
-      class="ease h-[2px] w-6 transform bg-gray-300 transition duration-300 group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45"
-    ></span>
-  </button>
-</div>
+    <div class="hidden flex-row justify-start gap-8 md:flex">
+      {/* Enlace con animación de subrayado dividido en dos colores */}
+      {links.map((link) => <NavLink href={link.href} text={link.text} />)}
+    </div>
 
-<header class="fixed top-0 z-50 mx-auto flex h-20 w-full items-center text-white">
-  <div class="flex justify-between px-6 py-4 md:w-full">
-    <a href="/" class="cursor-pointer transition duration-300 hover:scale-110 md:hidden">
-      <img src="/favicon.svg" alt="logo" class="h-auto w-7" />
-    </a>
-
-    <div id="overlay-menu" class="bg-theme-raisin-black/50 fixed inset-0 hidden h-screen"></div>
-    <nav
-      id="navContent"
-      class="bg-theme-french-mauve/90 fixed top-0 right-0 mx-auto hidden h-screen max-w-6xl items-center justify-between space-y-2 px-6 pt-14 text-sm font-light backdrop-blur-2xl md:relative md:flex md:h-fit md:w-full md:space-y-0 md:bg-transparent md:py-4 md:backdrop-blur-none"
-    >
-      <div
-        class:list={[
-          'flex flex-col justify-start space-y-2 md:flex-row md:gap-8 md:space-y-0',
-          shouldShowLogo ? 'md:w-1/3' : 'md:flex-grow',
-        ]}
-      >
-        {/* Enlace con animación de subrayado dividido en dos colores */}
-        <a
-          href="/la-porra"
-          class="group relative inline-block w-fit py-1 leading-relaxed tracking-wider"
-        >
-          <span class="text-theme-seashell">HAZ TU PORRA</span>
-          {/* Contenedor del subrayado con overflow hidden para la animación */}
-          <div class="relative mt-1 h-[2px] w-full overflow-hidden">
-            {/* Línea rosa que se anima desde la izquierda */}
-            <div
-              class:list={[
-                'absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-250 ease-out',
-                isActive('/la-porra') ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
-              ]}
-            >
-            </div>
-            {/* Línea turquesa que se anima desde la derecha */}
-            <div
-              class:list={[
-                'absolute right-0 bottom-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-250 ease-out',
-                isActive('/la-porra') ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
-              ]}
-            >
-            </div>
-          </div>
+    {
+      shouldShowLogo && (
+        <a href="/" class="relative mx-auto cursor-pointer duration-500 hover:scale-110">
+          <img
+            class="h-auto w-10"
+            src="/favicon.svg"
+            fetchpriority="high"
+            alt="La Velada del Año V"
+            decoding="async"
+          />
         </a>
-        {/* Segundo enlace con la misma animación */}
+      )
+    }
+
+    {
+      shouldShowLogo && (
         <a
-          href="/combates"
-          class="group relative inline-block w-fit py-1 leading-relaxed tracking-wider"
+          href="/"
+          class="relative mx-auto hidden w-1/3 cursor-pointer duration-500 hover:scale-110 md:inline-block"
         >
-          <span class="text-theme-seashell">VER COMBATES</span>
-          {/* Contenedor del subrayado con overflow hidden para la animación */}
-          <div class="relative mt-1 h-[2px] w-full overflow-hidden">
-            {/* Línea rosa que se anima desde la izquierda */}
-            <div
-              class:list={[
-                'absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-300 ease-out',
-                isActive('/combates') ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
-              ]}
-            >
-            </div>
-            {/* Línea turquesa que se anima desde la derecha */}
-            <div
-              class:list={[
-                'absolute right-0 bottom-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-300 ease-out',
-                isActive('/combates') ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
-              ]}
-            >
-            </div>
-          </div>
+          <img
+            class="mx-auto h-auto w-10"
+            src="/favicon.svg"
+            fetchpriority="high"
+            alt="La Velada del Año V"
+            decoding="async"
+          />
         </a>
-      </div>
-
-      {
-        shouldShowLogo && (
-          <a
-            href="/"
-            class="relative mx-auto hidden w-1/3 cursor-pointer duration-500 hover:scale-110 md:inline-block"
-          >
-            <img
-              class="mx-auto h-auto w-10"
-              src="/favicon.svg"
-              fetchpriority="high"
-              alt="La Velada del Año V"
-              decoding="async"
-            />
-          </a>
-        )
-      }
+      )
+    }
 
-      <div
-        class:list={[
-          'flex-col items-end md:text-right',
-          shouldShowLogo ? 'md:w-1/3' : 'md:flex-grow',
-        ]}
-      >
+    <div
+      class:list={[
+        'flex-col items-end md:text-right',
+        shouldShowLogo ? 'md:w-1/3' : 'md:flex-grow',
+      ]}
+    >
+      <span
+        class="text-theme-seashell relative inline-block cursor-not-allowed py-1 leading-relaxed tracking-wider opacity-90"
+        >COMPRA LAS ENTRADAS
         <span
-          class="text-theme-seashell relative inline-block cursor-not-allowed py-1 leading-relaxed tracking-wider opacity-90"
-          >COMPRA LAS ENTRADAS
-          <span
-            class="absolute inset-0 top-4 mt-1 text-center text-[10px] leading-normal tracking-wide text-yellow-500"
-            >PRÓXIMAMENTE</span
-          >
-        </span>
-      </div>
-    </nav>
-  </div>
+          class="absolute inset-0 top-4 mt-1 text-center text-[10px] leading-normal tracking-wide text-yellow-500"
+          >PRÓXIMAMENTE</span
+        >
+      </span>
+    </div>
+  </nav>
 </header>
 
 <style>
@@ -145,7 +76,6 @@ const isActive = (path: string) => pathname === path
     animation: header-blur-scroll 0.3s linear both;
     animation-timeline: scroll();
     animation-range: 0 250px;
-    border-bottom: 1px solid transparent;
   }
 
   @keyframes header-blur-scroll {
@@ -158,28 +88,6 @@ const isActive = (path: string) => pathname === path
       backdrop-filter: blur(10px);
       background: rgba(0, 0, 0, 0.5);
       padding-bottom: var(--spacing-6);
-      border-bottom-color: black;
     }
   }
 </style>
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    function toggleMenu(
-      menuBtn: Element | null,
-      navContent: Element | null,
-      overlayMenu: Element | null,
-    ) {
-      menuBtn?.classList.toggle('open')
-      navContent?.classList.toggle('hidden')
-      overlayMenu?.classList.toggle('hidden')
-    }
-
-    const navContent = document.querySelector('#navContent')
-    const menuButton = document.querySelector('#menuButton')
-    const overlayMenu = document.querySelector('#overlay-menu')
-
-    menuButton?.addEventListener('click', () => toggleMenu(menuButton, navContent, overlayMenu))
-    overlayMenu?.addEventListener('click', () => toggleMenu(menuButton, navContent, overlayMenu))
-  })
-</script>

src/components/NavLink.astro

@@ -0,0 +1,37 @@
+---
+//NavLink.astro
+interface NavLinkProps {
+  href: string
+  text: string
+}
+
+const { href, text } = Astro.props as NavLinkProps
+
+const { pathname } = Astro.url
+
+// Comprueba si la ruta actual está activa
+const isActive = (path: string) => pathname === path
+---
+
+<a href={href} class="group relative inline-block py-1 leading-relaxed tracking-wider">
+  <span class="text-theme-seashell">{text}</span>
+  {/* Contenedor del subrayado con overflow hidden para la animación */}
+  <div class="relative mt-1 h-[2px] w-full overflow-hidden">
+    {/* Línea rosa que se anima desde la izquierda */}
+    <div
+      class:list={[
+        'absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-250 ease-out',
+        isActive(href) ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
+      ]}
+    >
+    </div>
+    {/* Línea turquesa que se anima desde la derecha */}
+    <div
+      class:list={[
+        'absolute right-0 bottom-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-250 ease-out',
+        isActive(href) ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
+      ]}
+    >
+    </div>
+  </div>
+</a>

src/consts/links.ts

@@ -0,0 +1,4 @@
+export const links = [
+  { href: '/la-porra', text: 'HAZ TU PORRA' },
+  { href: '/combates', text: 'VER COMBATES' },
+]

src/pages/combates/index.astro

@@ -12,9 +12,9 @@ import { combates } from '@/consts/pageTitles'
     </div>
 
     <div class="flex w-full flex-col items-center text-center">
-      <div id="landing" class="absolute top-0 flex w-full flex-col items-center py-30">
+      <div id="landing" class="py-30 absolute top-0 flex w-full flex-col items-center">
         <h3
-          class="text-theme-seashell animate-fade-in animate-delay-300 mt-4 -skew-3 text-[42px] sm:text-6xl leading-[100%] font-medium [text-shadow:_5px_5px_10px_rgb(0_0_0_/_50%)] tracking-wider brightness-125 transition-all duration-300"
+          class="text-theme-seashell animate-fade-in animate-delay-300 -skew-3 mt-4 text-[42px] font-medium leading-[100%] tracking-wider brightness-125 transition-all duration-300 [text-shadow:_5px_5px_10px_rgb(0_0_0_/_50%)] sm:text-6xl"
         >
           <strong>LISTA DE LOS</strong>
           <br /><strong>COMBATES</strong>
@@ -23,7 +23,7 @@ import { combates } from '@/consts/pageTitles'
 
       <div
         id="combats-container"
-        class="relative top-96 mx-auto max-w-7xl p-6 mt-10 mb-72 flex flex-wrap justify-center gap-4 md:gap-8"
+        class="relative top-96 mx-auto mb-72 mt-10 flex max-w-7xl flex-wrap justify-center gap-4 p-6 md:gap-8"
       >
         {
           COMBATS.map(({ id, number, fighters, title }) => (
@@ -32,7 +32,7 @@ import { combates } from '@/consts/pageTitles'
               href={`combates/${id}`}
               title={`Ir al combate ${number} de ${title}`}
             >
-              <div class="combat group animate-fade-in animate-delay-200 relative flex h-[40vh] w-full sm:h-[50vh] lg">
+              <div class="combat animate-fade-in animate-delay-200 lg group relative flex h-[40vh] w-full sm:h-[50vh]">
                 {fighters.map((fighter, index) => (
                   <img
                     src={`/images/fighters/big/${fighter}.webp`}
@@ -43,7 +43,7 @@ import { combates } from '@/consts/pageTitles'
                   />
                 ))}
 
-                <div class="absolute bottom-0 z-30 flex h-auto w-full -skew-4 flex-col items-center justify-center p-8 transition-transform duration-300 group-hover:scale-90">
+                <div class="-skew-4 absolute bottom-0 z-30 flex h-auto w-full flex-col items-center justify-center p-8 transition-transform duration-300 group-hover:scale-90">
                   <img
                     src={`/images/fighters/text/${fighters[0]}.webp`}
                     loading="lazy"
@@ -77,9 +77,8 @@ import { combates } from '@/consts/pageTitles'
   </section>
 </Layout>
 
-
 <style>
-  .combat{
+  .combat {
     animation-timeline: view(block 100% 10%);
   }
-</style>
+</style>