Navbar rebasement (#35)

* feat: Create `burgerMenu` and `closeIcon` svg files

* refactor!: Implement Alpine.js for handling navbar interactivity + Add `Link.astro`

Navbar original interactivity was built using JS vanilla. Looking to materialize current navbar mockup design, offcanvas menu was rebuilt using Alpine.js to refactor some feautures and incorporate new ones --like a close button

* refactor!: Implement interactivity, order and formatting enhancements for `Navbar.astro`

- Group Navbar and children components within a dedicated folder
- Set `close()` method to `Link.astro` for closing offcanvas menu when clicking any option
- Enhance code formatting

* fix: Avoid re-declarations in `OffcanvasMenu.astro`

Details: Renamed `Link` interface to `LinkBody`

* fix: Address click event bug in `Link.astro`

While testing screen size change from mobile to desktop, and click in any link in menu, offcanvas menu activated (and we don't want this in desktop view).
This commit implements a new condition in `Link.astro` click event for avoiding this.

* fix: expected } but instead the file ends

biomejs/biome#4141

---------

Co-authored-by: Brayen Gavilanes <[email protected]>

Author: nsandoya

public/icons/burgerMenu.svg

@@ -0,0 +1,24 @@
+---
+interface Props {
+	text: string;
+	href: string;
+	size?: string;
+}
+
+const { text, href, size } = Astro.props;
+---
+<!-- 
+Link component:
+- Handles navigation within the app.
+- (Within offcanvas menu) clicking a link triggers `toggleMenu()` to close the menu and navigate to the selected section.
+
+* IMPORTANT: This logic applies only to relevant use cases. External links or non-interactive links might require adjustments.
+-->
+<div @click="openMenu && toggleMenu()">
+  <a
+    href={href}
+    class={`font-gabarito text-gray-300 ${size} tracking-wide px-3 py-2 rounded-md hover:text-white`}
+  >
+    {text}
+  </a>
+</div>

public/icons/closeIcon.svg

@@ -0,0 +1,53 @@
+---
+import Link from "./Link.astro";
+
+import burgerMenuIcon from "../../../public/icons/burgerMenu.svg?raw";
+import OffcanvasMenu from "./OffcanvasMenu.astro";
+
+const links = [
+	{ text: "Inicio", href: "/" },
+	{ text: "Comunidades", href: "/communities" },
+	{ text: "Eventos", href: "/events" },
+	{ text: "Voluntariado", href: "/#about-us" },
+];
+---
+<!--
+Navbar component:
+- Includes Alpine.js state (`openMenu`) and method (`toggleMenu`) to manage the offcanvas menu interactivity.
+- Alpine.js directives control visibility (`x-bind:class`), user interaction (`@click`), and transitions (`x-transition`) in father and children components.
+- Links are rendered dynamically.
+-->
+
+<nav
+  x-data="{
+    openMenu: false,
+
+    toggleMenu() {
+      this.openMenu = !this.openMenu;
+    }
+  }"
+  class="bg-gray-800 w-full fixed z-10"
+>
+  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
+    <a href="/" class="font-gabarito text-white text-lg  font-bold">Ecuador In Tech</a>
+
+    <!-- Burger menu button -->
+    <button
+      @click="toggleMenu()"
+      id="mobile-menu-button"
+      class="block lg:hidden"
+    >
+      <Fragment set:html={burgerMenuIcon} />
+    </button>
+
+    <!-- Links -->
+    <div class="hidden lg:flex lg:items-center lg:space-x-8">
+      {links.slice(1).map((link) => (
+        <Link href={link.href} text={link.text} size="text-[0.95rem]"/>
+      ))}
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  <OffcanvasMenu links={links}/>
+</nav>

src/components/Navbar.astro

@@ -0,0 +1,48 @@
+---
+import closeIcon from "../../../public/icons/closeIcon.svg?raw";
+import Link from "./Link.astro";
+
+interface LinkBody {
+	text: string;
+	href: string;
+}
+
+const { links } = Astro.props;
+---
+<!-- 
+OffcanvasMenu component:
+- Interactivity relies on Alpine.js:
+  1. Visibility: Managed by `x-bind:class`, implements Tailwind classes relying on the `openMenu` state from `Navbar`.
+  2. Transitions: Implemented using `x-transition.origin.top.left` for smooth animations.
+  3. Blinking prevention: Uses `x-cloak` to hide elements until Alpine.js initializes.
+- User actions (clicking the burger menu or links) trigger `toggleMenu()` to open/close the menu.
+-->
+
+<div
+  x-cloak
+  x-bind:class="{
+      'translate-x-0 ': openMenu,
+      '-translate-x-full duration-400': !openMenu
+    }"
+  class="fixed top-0 left-0 w-full h-full bg-gray-800 text-white transform transition-transform duration-300"
+>
+  <!-- Close button -->
+  <a
+    @click="toggleMenu()"
+    class="w-full flex flex-row justify-end px-4 py-3 text-white cursor-pointer"
+  >
+    <Fragment set:html={closeIcon} />
+  </a>
+
+  <!-- Links -->
+  <ul class="flex flex-col items-center justify-center h-full p-4">
+    {
+      links.map((link: LinkBody) => (
+        <div class="block my-4 px-4 uppercase text-xl hover:font-medium">
+          <Link href={link.href} text={link.text} />
+        </div>
+      ))
+    }
+    <div class="h-[10%]"></div>
+  </ul>
+</div>

src/components/Navbar/Link.astro

@@ -1,6 +1,6 @@
 ---
 import Footer from "../components/Footer.astro";
-import Navbar from "../components/Navbar.astro";
+import Navbar from "../components/Navbar/Navbar.astro";
 
 // Incorporate global styles file to whole website
 import "../styles/globals.css";

src/components/Navbar/Navbar.astro

@@ -33,9 +33,14 @@
   }
 
   span,
-  svg {
+  svg{
     @apply text-sm;
   }
+  
+  /* Avoids undesired offcanvas menu 'blink' when closing */
+  [x-cloak] {
+    display: none !important;
+  }
 
   /* Components custom styles */
   .faqs-container {