Repository: Afordin/web-afordin
Pull request #44: Add Navbar
Author: login: idiegorojas
Created: 2025-04-22T18:34:31Z | Merged: 2025-04-23T22:30:49Z

Hola! Subo la navbar. Dejo imagen de cómo va quedando.

<img width="1431" alt="Screenshot 1" src="https://github.com/user-attachments/assets/5a73394d-32d8-433f-8bdd-7616ad91305b" />
<img width="896" alt="Screenshot 2" src="https://github.com/user-attachments/assets/b034fea9-e9f0-46ac-9bfe-f21c7d765afb" />
<img width="695" alt="Screenshot 3" src="https://github.com/user-attachments/assets/52c2b3ec-65e7-4f2b-b64f-e6ba9447e49c" />



Diff:
diff --git a/src/assets/Github.svg b/src/assets/Github.svg
new file mode 100644
index 0000000..a557afc
--- /dev/null
+++ b/src/assets/Github.svg
@@ -0,0 +1,6 @@
+<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.2617 0.924133C18.5257 0.924133 15.8165 1.46672 13.2887 2.52092C10.761 3.57512 8.46418 5.12029 6.52952 7.0682C2.6223 11.0022 0.427246 16.3378 0.427246 21.9013C0.427246 31.1732 6.40674 39.0396 14.678 41.8296C15.7198 41.9974 16.0531 41.3471 16.0531 40.7807V37.2356C10.282 38.4942 9.05272 34.4246 9.05272 34.4246C8.09434 31.9913 6.74009 31.341 6.74009 31.341C4.84416 30.0404 6.88594 30.0824 6.88594 30.0824C8.96938 30.2292 10.0736 32.243 10.0736 32.243C11.8862 35.4315 14.9489 34.4876 16.1364 33.9841C16.324 32.6206 16.8657 31.6976 17.449 31.1732C12.8238 30.6488 7.96933 28.8447 7.96933 20.8524C7.96933 18.524 8.76104 16.657 10.1153 15.1676C9.90694 14.6432 9.17773 12.4616 10.3236 9.62965C10.3236 9.62965 12.0737 9.06327 16.0531 11.7693C17.699 11.3078 19.4908 11.0771 21.2617 11.0771C23.0327 11.0771 24.8244 11.3078 26.4703 11.7693C30.4497 9.06327 32.1998 9.62965 32.1998 9.62965C33.3457 12.4616 32.6165 14.6432 32.4082 15.1676C33.7624 16.657 34.5541 18.524 34.5541 20.8524C34.5541 28.8657 29.6789 30.6278 25.0328 31.1522C25.7828 31.8025 26.4703 33.0821 26.4703 35.033V40.7807C26.4703 41.3471 26.8037 42.0184 27.8663 41.8296C36.1375 39.0186 42.0962 31.1732 42.0962 21.9013C42.0962 19.1465 41.5573 16.4187 40.5103 13.8737C39.4633 11.3286 37.9286 9.01611 35.9939 7.0682C34.0593 5.12029 31.7625 3.57512 29.2347 2.52092C26.707 1.46672 23.9978 0.924133 21.2617 0.924133Z"
+    fill="white"
+  />
+</svg>
diff --git a/src/assets/Logo.svg b/src/assets/Logo.svg
new file mode 100644
index 0000000..00ed35f
--- /dev/null
+++ b/src/assets/Logo.svg
@@ -0,0 +1,20 @@
+<svg width="37" height="47" viewBox="0 0 37 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="Vector">
+    <path
+      d="M20.3901 8.85058C20.3901 7.6771 19.9205 6.55173 19.0847 5.72182C18.2487 4.89201 17.1148 4.42565 15.9326 4.4253C17.1148 4.42493 18.2487 3.95859 19.0847 3.12875C19.9205 2.29885 20.3901 1.17347 20.3901 0C20.3901 1.17356 20.8597 2.29912 21.6959 3.12903C22.5319 3.95894 23.6661 4.42521 24.8485 4.4253C23.6661 4.42539 22.5319 4.89164 21.6959 5.72155C20.8597 6.55148 20.3901 7.67701 20.3901 8.85058Z"
+      fill="white"
+    />
+    <path
+      d="M25.9277 16.9019C25.5282 15.78 24.7886 14.8081 23.8105 14.1202C22.8323 13.4322 21.6632 13.0616 20.4643 13.0594C19.2654 13.0574 18.095 13.4237 17.1142 14.1083C16.1336 14.7928 15.3904 15.762 14.9871 16.8825L10.1769 30.2535H17.1537L20.4098 19.803L24.6567 34.0074L26.6464 39.8321C27.2775 41.8472 28.5415 43.6091 30.2536 44.8601C31.966 46.1113 34.0366 46.7858 36.1629 46.7853H36.5517L25.9277 16.9019Z"
+      fill="white"
+    />
+    <path
+      d="M4.23187 46.7862H4.5658C6.65098 46.786 8.68374 46.137 10.3778 44.9303C12.072 43.7237 13.3423 42.0202 14.01 40.0596L14.0879 39.8313L14.1452 39.6557H6.79547L4.23187 46.7862Z"
+      fill="white"
+    />
+    <path
+      d="M14.8126 38.2744C17.9856 37.7049 20.3919 34.95 20.3919 31.6364H6.68818C4.91447 31.6366 3.2134 32.3362 1.95921 33.581C0.705008 34.8257 0.000269739 36.5139 0 38.2744H14.8126Z"
+      fill="white"
+    />
+  </g>
+</svg>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index ea49786..c3ecebf 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,12 +1,16 @@
 ---
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
+import Github from '../assets/Github.svg?url'
+import Discord from '../assets/Discord.svg?url'
+import Logo from '../assets/Logo.svg?url'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 
+
 const links = [
   {
-    href: '#',
+    href: '/',
     name: t('nav.home'),
   },
   {
@@ -25,28 +29,147 @@ const links = [
     href: '#',
     name: t('nav.contributor'),
   },
-] satisfies Array<{ href: '#'; name: string }>
+] satisfies Array<{ href: string; name: string }>
 
 const socialLinks = [
   {
-    href: '#',
+    href: 'https://www.github.com/Afordin',
     name: 'github',
+    icon: Github
   },
   {
-    href: '#',
+    href: 'https://discord.com/invite/comuafor',
     name: 'discord',
+    icon: Discord
   },
-] satisfies Array<{ href: '#'; name: string }>
+] satisfies Array<{ href: string; name: string; icon: any}>
 ---
 
-<nav class="absolute top-5 z-50 flex items-center justify-between gap-5 rounded-full bg-white/30 p-4">
-  <img src="/logo.png" alt="Afordin Organization Logo" />
-  {links.map((link) => <a href={link.href}>{link.name}</a>)}
-  {
-    socialLinks.map((link) => (
-      <a href={link.href} class="size-8">
-        <img src={`./social/${link.name}.png`} alt={link.name} />
+<header class="fixed inset-x-0 top-0 z-50 container mx-auto">
+  <nav
+    class="mt-12 flex items-center justify-between gap-6 rounded-full border border-orange-600/20 bg-gradient-to-br from-white/15 to-white/0 px-8 py-2 shadow-lg backdrop-blur-md transition-all duration-300 ease-in-out"
+  >
+    <div>
+      <a href="/">
+        <img src={Logo} alt="Logo de Afordin" />
       </a>
-    ))
-  }
-</nav>
+    </div>
+    <div class="flex lg:hidden">
+      <button
+        type="button"
+        id="menu-toggle"
+        class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white"
+      >
+        <span class="sr-only">Toggle menu</span>
+        <svg class="hamburger-icon size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+        </svg>
+        <svg class="close-icon hidden size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Navigation menu for large screens -->
+    <div class="hidden lg:flex lg:items-center lg:gap-6">
+      {links.map((link, index) => (
+        <>
+          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
+            {link.name}
+          </a>
+          {index < links.length - 1 && <span class="text-[8px] text-gray-300">●</span>}
+        </>
+      ))}
+    </div>
+
+    <!-- Social media icons for large screens -->
+    <div class="hidden items-center justify-center gap-4 lg:flex">
+      {socialLinks.map((link) => (
+        <a href={link.href} target="_blank" class="inline-block transition-transform duration-300 hover:scale-110">
+          <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
+        </a>
+      ))}
+    </div>
+  </nav>
+
+  <!-- Mobile menu -->
+  <div
+    class="pointer-events-none mx-auto mt-2 max-w-[95%] scale-95 transform opacity-0 transition-all duration-50 lg:hidden"
+    id="mobile-menu"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="flex flex-col gap-4 rounded-2xl border border-white/40 bg-gradient-to-br from-white/15 to-white/0 shadow-lg backdrop-blur-md"
+    >
+      <div class="flex flex-col items-center gap-5 pt-6 pb-4">
+        {links.map((link) => (
+          <a href={link.href} class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full">
+            {link.name}
+          </a>
+        ))}
+      </div>
+      <div class="flex flex-row items-center justify-center gap-6 border-t border-white/40 py-3">
+        {socialLinks.map((link) => (
+          <a
+            href={link.href}
+            target="_blank"
+            class="inline-block transition-transform duration-300 hover:scale-110"
+          >
+            <img src={link.icon} alt={`Icono de ${link.name}`} class="h-11 w-11" />
+          </a>
+        ))}
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const menuToggle = document.getElementById('menu-toggle')
+    const hamburgerIcon = document.querySelector('.hamburger-icon')
+    const closeIcon = document.querySelector('.close-icon')
+    const mobileMenu = document.getElementById('mobile-menu')
+    const nav = document.querySelector('nav')
+
+    if (menuToggle && hamburgerIcon && closeIcon && mobileMenu) {
+      let isMenuOpen = false
+
+      menuToggle.addEventListener('click', () => {
+        isMenuOpen = !isMenuOpen
+
+        mobileMenu.classList.toggle('opacity-0', !isMenuOpen)
+        mobileMenu.classList.toggle('scale-95', !isMenuOpen)
+        mobileMenu.classList.toggle('pointer-events-none', !isMenuOpen)
+        mobileMenu.classList.toggle('opacity-100', isMenuOpen)
+        mobileMenu.classList.toggle('scale-100', isMenuOpen)
+        mobileMenu.classList.toggle('pointer-events-auto', isMenuOpen)
+
+        hamburgerIcon.classList.toggle('hidden', isMenuOpen)
+        closeIcon.classList.toggle('hidden', !isMenuOpen)
+      })
+    }
+
+    if (nav) {
+      const maxMargin = 48
+
+      const handleScroll = () => {
+        const scrollPosition = window.scrollY
+
+        const newMargin = Math.max(0, maxMargin - scrollPosition)
+
+        nav.style.marginTop = `${newMargin}px`
+
+        if (newMargin === 0) {
+          nav.classList.add('sticky-nav')
+        } else {
+          nav.classList.remove('sticky-nav')
+        }
+      }
+
+      handleScroll()
+
+      window.addEventListener('scroll', handleScroll)
+    }
+  })
+</script>
\ No newline at end of file


Reviews:
user: login: felixicaza
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-22T19:01:05Z
user: login: afordigital
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-23T22:30:39Z

Review comments:
diff_hunk: @@ -2,4 +2,186 @@
 
 ---
 
-<p class="fixed m-auto my-8 w-full max-w-7xl bg-green-500">Nav</p>
+<header class="fixed inset-x-0 top-0 z-50 container mx-auto">
+  <nav
+    class="mt-16 flex items-center justify-between gap-6 rounded-full border border-orange-600/20 bg-gradient-to-br from-white/15 to-white/0 px-8 py-2 shadow-lg backdrop-blur-md transition-all duration-300 ease-in-out"
+  >
+    <div>
+      <a href="/">
+        <img src="/src/assets/Logo.svg" alt="Logo de Afordin" />
+      </a>
+    </div>
+    <div class="flex lg:hidden">
+      <button
+        type="button"
+        id="menu-toggle"
+        class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white"
+      >
+        <span class="sr-only">Toggle menu</span>
+        <svg class="hamburger-icon size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+        </svg>
+        <svg class="close-icon hidden size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Navigation menu for large screens -->
+    <div class="hidden lg:flex lg:items-center lg:gap-6">
+      <a
+        href="/"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Inicio</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Values"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Valores</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#LastProjects"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Proyectos</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Events"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Eventos</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Contributors"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Colaboradores</a
+      >
+    </div>
+
+    <!-- Social media icons for large screens -->
+    <div class="hidden items-center justify-center gap-4 lg:flex">
+      <a
+        href="https://www.github.com/Afordin"
+        target="_blank"
+        class="inline-block transition-transform duration-300 hover:scale-110"
+      >
+        <img src="/src/assets/Github.svg" alt="Icono de github" />
path: src/components/Nav.astro
user: login: felixicaza
body: Cuando un svg está en el directorio `/src/assets` puedes importarlo y usarlo de esta manera:

```astro
---
import Github from '../assets/Github.svg'
---

<Github />
```

Para evitar que falle la carga al hacer build. 🙂

Referencia: https://docs.astro.build/en/guides/images/#svg-components
created_at: 2025-04-22T19:00:33Z
author_association: COLLABORATOR
diff_hunk: @@ -2,4 +2,186 @@
 
 ---
 
-<p class="fixed m-auto my-8 w-full max-w-7xl bg-green-500">Nav</p>
+<header class="fixed inset-x-0 top-0 z-50 container mx-auto">
+  <nav
+    class="mt-16 flex items-center justify-between gap-6 rounded-full border border-orange-600/20 bg-gradient-to-br from-white/15 to-white/0 px-8 py-2 shadow-lg backdrop-blur-md transition-all duration-300 ease-in-out"
+  >
+    <div>
+      <a href="/">
+        <img src="/src/assets/Logo.svg" alt="Logo de Afordin" />
+      </a>
+    </div>
+    <div class="flex lg:hidden">
+      <button
+        type="button"
+        id="menu-toggle"
+        class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white"
+      >
+        <span class="sr-only">Toggle menu</span>
+        <svg class="hamburger-icon size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+        </svg>
+        <svg class="close-icon hidden size-10" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Navigation menu for large screens -->
+    <div class="hidden lg:flex lg:items-center lg:gap-6">
+      <a
+        href="/"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Inicio</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Values"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Valores</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#LastProjects"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Proyectos</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Events"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Eventos</a
+      >
+      <span class="text-[8px] text-gray-300">●</span>
+      <a
+        href="#Contributors"
+        class="relative font-semibold text-white after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:left-0 hover:after:w-full"
+        >Colaboradores</a
+      >
+    </div>
+
+    <!-- Social media icons for large screens -->
+    <div class="hidden items-center justify-center gap-4 lg:flex">
+      <a
+        href="https://www.github.com/Afordin"
+        target="_blank"
+        class="inline-block transition-transform duration-300 hover:scale-110"
+      >
+        <img src="/src/assets/Github.svg" alt="Icono de github" />
+      </a>
+      <a
+        href="https://discord.com/invite/comuafor"
+        target="_blank"
+        class="inline-block transition-transform duration-300 hover:scale-110"
+      >
+        <img src="/src/assets/Discord.svg" alt="Icono de discord" class="h-11 w-11" />
path: src/components/Nav.astro
user: login: felixicaza
body: Lo mismo acá para el svg de Discord.
created_at: 2025-04-22T19:00:57Z
author_association: COLLABORATOR

PR comments:
user: login: netlify[bot]
created_at: 2025-04-22T18:34:47Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *afordin* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 816d1bf6590cb9375474d47a9ea73205e38f76dd |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/afordin/deploys/680963073f31d700096fc2ed |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-44--afordin.netlify.app](https://deploy-preview-44--afordin.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTQ0LS1hZm9yZGluLm5ldGxpZnkuYXBwIn0.OoTqmknOPBgHitgI9-73tScr1Hho5drICn3YLWf4X5E)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [afordin Preview](https://deploy-preview-44--afordin.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/afordin/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: idiegorojas
created_at: 2025-04-22T18:35:49Z
body: ¡Hola Afor! Acabo de crear el pull request con la navbar. Ojalá esté bien 😅, todavía le estoy cogiendo el tiro al frontend. Quedo pendiente por si hay que hacerle ajustes.
author_association: CONTRIBUTOR
user: login: afordigital
created_at: 2025-04-22T19:35:40Z
body: Esta PR está genial porque expande lo que nuestro compañero Nico había cogido de la tarea del Navbar, pero con tu extensión podemos meterle muchas mejoras como cambiar los pngs por svgs y añadir el responsive. Gran trabajo, resuelve los conflictos y lo mergeamos!
author_association: MEMBER
user: login: idiegorojas
created_at: 2025-04-23T22:23:21Z
body: Hola, incorporé parte del código de Nico para optimizar la nav.

Mantuve todo lo que ya tenía: responsive, animaciones, scroll, efectos, etc. Utilicé los loops que propuso Nico para evitar repetir elementos, lo que hizo que el código quedara más limpio.

Además, incorporé las recomendaciones de felixicaza para importar correctamente las imágenes en Astro y evitar errores en la carga al hacer build.
author_association: CONTRIBUTOR
user: login: afordigital
created_at: 2025-04-23T22:31:55Z
body: Vaya cambio, esto es totalmente increíble!!!! gracias por tremenda contribución 🐀🤟
author_association: MEMBER
user: login: idiegorojas
created_at: 2025-04-24T02:15:23Z
body: Gracias a ti, Afor, por todo lo que nos aportas. Mañana reviso la navegación en mobile para dejarla como en Figma y ajusto algunos detalles que se desalinearon.
author_association: CONTRIBUTOR