athlefi-ui 0.1.7 → 0.1.9

package/src/components/organisms/Header.astro

@@ -0,0 +1,407 @@
+---
+import Logo from "../atoms/Logo.astro";
+import NavMenu from "../molecules/NavMenu.astro";
+
+export interface Props {
+  class?: string;
+}
+
+const { class: className = "" } = Astro.props;
+---
+
+<header
+  class={`header ${className}`}
+  role="banner"
+>
+  <div class="header__container">
+    <!-- Distribución con grid para centrado perfecto -->
+    <div class="header__grid">
+      <!-- Logo -->
+      <div class="header__logo">
+        <Logo />
+      </div>
+
+      <!-- Navegación Desktop -->
+      <div class="header__nav-desktop">
+        <NavMenu class="header__nav-center" />
+      </div>
+
+      <!-- Botones Auth Desktop - Slot -->
+      <div class="header__auth-desktop">
+        <slot name="auth-buttons" />
+      </div>
+
+      <!-- Botón Hamburguesa Mobile -->
+      <div class="header__mobile-toggle">
+        <button
+          id="mobile-menu-button"
+          type="button"
+          class="header__hamburger"
+          aria-controls="mobile-menu"
+          aria-expanded="false"
+          aria-label="Abrir menú de navegación"
+        >
+          <span class="sr-only">Abrir menú principal</span>
+          <!-- Hamburger Icon -->
+          <svg
+            id="hamburger-icon"
+            class="header__icon header__icon--visible"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+          <!-- Close Icon -->
+          <svg
+            id="close-icon"
+            class="header__icon header__icon--hidden"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile Menu -->
+  <div
+    id="mobile-menu"
+    class="header__mobile-menu header__mobile-menu--hidden"
+    role="navigation"
+    aria-label="Menú de navegación móvil"
+  >
+    <div class="header__mobile-content">
+      <!-- Mobile Navigation -->
+      <NavMenu isMobile={true} />
+
+      <!-- Mobile Auth Buttons - Slot -->
+      <div class="header__mobile-auth">
+        <slot name="auth-buttons-mobile">
+          <slot name="auth-buttons" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</header>
+
+<style>
+  .header {
+    background-color: var(--color-primary-90);
+    border-bottom: 1px solid var(--color-gray-medium);
+  }
+
+  .header__container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .header__container {
+      padding: 0 1.5rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .header__container {
+      padding: 0 2rem;
+    }
+  }
+
+  /* Grid Layout */
+  .header__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+  }
+
+  @media (min-width: 1024px) {
+    .header__grid {
+      grid-template-columns: repeat(16, 1fr);
+    }
+  }
+
+  /* Logo */
+  .header__logo {
+    grid-column: span 2;
+  }
+
+  @media (min-width: 1024px) {
+    .header__logo {
+      grid-column: 1 / span 3;
+    }
+  }
+
+  /* Desktop Navigation */
+  .header__nav-desktop {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .header__nav-desktop {
+      display: block;
+      grid-column: 5 / span 8;
+      margin-left: 5rem;
+    }
+  }
+
+  .header__nav-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Desktop Auth Buttons */
+  .header__auth-desktop {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .header__auth-desktop {
+      display: block;
+      grid-column: 14 / span 3;
+    }
+  }
+
+  /* Mobile Toggle */
+  .header__mobile-toggle {
+    grid-column: span 2;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  @media (min-width: 1024px) {
+    .header__mobile-toggle {
+      display: none;
+    }
+  }
+
+  /* Hamburger Button */
+  .header__hamburger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    color: var(--color-white);
+    background-color: transparent;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+
+  .header__hamburger:hover {
+    background-color: rgb(31, 41, 55);
+    color: var(--color-primary-60);
+  }
+
+  .header__hamburger:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
+  }
+
+  /* Icons */
+  .header__icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .header__icon--visible {
+    display: block;
+  }
+
+  .header__icon--hidden {
+    display: none;
+  }
+
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* Mobile Menu */
+  .header__mobile-menu {
+    border-top: 1px solid var(--color-primary-60);
+  }
+
+  @media (min-width: 1024px) {
+    .header__mobile-menu {
+      display: none !important;
+    }
+  }
+
+  .header__mobile-menu--hidden {
+    display: none;
+  }
+
+  .header__mobile-menu--visible {
+    display: block;
+  }
+
+  .header__mobile-content {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .header__mobile-content {
+      padding: 1rem 1.5rem;
+    }
+  }
+
+  /* Mobile Auth */
+  .header__mobile-auth {
+    border-top: 1px solid var(--color-primary-60);
+    padding-top: 1rem;
+  }
+</style>
+
+<script>
+  // Mobile menu toggle functionality
+  document.addEventListener("DOMContentLoaded", function () {
+    // Get DOM elements
+    const mobileMenuButton = document.getElementById("mobile-menu-button");
+    const mobileMenu = document.getElementById("mobile-menu");
+    const hamburgerIcon = document.getElementById("hamburger-icon");
+    const closeIcon = document.getElementById("close-icon");
+
+    // Early return if any required element is missing
+    if (!mobileMenuButton || !mobileMenu || !hamburgerIcon || !closeIcon) {
+      console.warn("Mobile menu: Required DOM elements not found");
+      return;
+    }
+
+    let isMenuOpen = false;
+
+    /**
+     * Toggles the mobile menu visibility and updates UI states
+     */
+    function toggleMenu(): void {
+      try {
+        isMenuOpen = !isMenuOpen;
+
+        // Toggle menu visibility
+        if (isMenuOpen) {
+          mobileMenu!.classList.remove("header__mobile-menu--hidden");
+          mobileMenu!.classList.add("header__mobile-menu--visible");
+        } else {
+          mobileMenu!.classList.remove("header__mobile-menu--visible");
+          mobileMenu!.classList.add("header__mobile-menu--hidden");
+        }
+
+        // Toggle icons visibility
+        if (isMenuOpen) {
+          hamburgerIcon!.classList.remove("header__icon--visible");
+          hamburgerIcon!.classList.add("header__icon--hidden");
+          closeIcon!.classList.remove("header__icon--hidden");
+          closeIcon!.classList.add("header__icon--visible");
+        } else {
+          hamburgerIcon!.classList.remove("header__icon--hidden");
+          hamburgerIcon!.classList.add("header__icon--visible");
+          closeIcon!.classList.remove("header__icon--visible");
+          closeIcon!.classList.add("header__icon--hidden");
+        }
+
+        // Update ARIA attributes for accessibility
+        mobileMenuButton!.setAttribute("aria-expanded", isMenuOpen.toString());
+        mobileMenuButton!.setAttribute(
+          "aria-label",
+          isMenuOpen ? "Cerrar menú de navegación" : "Abrir menú de navegación",
+        );
+
+        // Manage body scroll and focus
+        if (isMenuOpen) {
+          document.body.style.overflow = "hidden";
+          // Focus first focusable element in mobile menu for keyboard navigation
+          const firstFocusableElement = mobileMenu!.querySelector(
+            'a, button, input, [tabindex]:not([tabindex="-1"])',
+          ) as HTMLElement;
+          firstFocusableElement?.focus();
+        } else {
+          document.body.style.overflow = "";
+          // Return focus to menu button when closing
+          mobileMenuButton!.focus();
+        }
+      } catch (error) {
+        console.error("Error toggling mobile menu:", error);
+      }
+    }
+
+    /**
+     * Closes the menu if it's currently open
+     */
+    function closeMenu(): void {
+      if (isMenuOpen) {
+        toggleMenu();
+      }
+    }
+
+    // Event Listeners
+
+    // Toggle menu on button click
+    mobileMenuButton.addEventListener("click", toggleMenu);
+
+    // Close menu when clicking outside
+    document.addEventListener("click", function (event: Event) {
+      const target = event.target as Node;
+      if (
+        isMenuOpen &&
+        !mobileMenu!.contains(target) &&
+        !mobileMenuButton!.contains(target)
+      ) {
+        closeMenu();
+      }
+    });
+
+    // Close menu on escape key
+    document.addEventListener("keydown", function (event: KeyboardEvent) {
+      if (event.key === "Escape" && isMenuOpen) {
+        closeMenu();
+      }
+    });
+
+    // Close menu when window is resized to desktop size
+    let resizeTimeout: number;
+    window.addEventListener("resize", function () {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = window.setTimeout(() => {
+        if (window.innerWidth >= 1024 && isMenuOpen) {
+          closeMenu();
+        }
+      }, 150);
+    });
+
+    // Close menu on page navigation (for SPAs)
+    window.addEventListener("beforeunload", closeMenu);
+  });
+</script>
+

package/src/index.ts

@@ -6,20 +6,32 @@
 // ============================================
 export { default as Button } from "./components/atoms/Button.astro";
 export { default as ContactIcon } from "./components/atoms/ContactIcon.astro";
+export { default as FooterLink } from "./components/atoms/FooterLink.astro";
+export { default as FormInput } from "./components/atoms/FormInput.astro";
+export { default as IconCard } from "./components/atoms/IconCard.astro";
+export { default as Logo } from "./components/atoms/Logo.astro";
+export { default as NavLink } from "./components/atoms/NavLink.astro";
+export { default as SocialIcon } from "./components/atoms/SocialIcon.astro";
+export { default as TabButton } from "./components/atoms/TabButton.astro";
+export { default as TextMono } from "./components/atoms/TextMono.astro";
+export { default as TimelineStep } from "./components/atoms/TimelineStep.astro";
 // export { default as Input } from "./components/atoms/Input.astro";
 // export { default as Label } from "./components/atoms/Label.astro";
 
 // ============================================
 // MOLÉCULAS
 // ============================================
+export { default as LinkGroup } from "./components/molecules/LinkGroup.astro";
+export { default as NavMenu } from "./components/molecules/NavMenu.astro";
+export { default as SocialGroup } from "./components/molecules/SocialGroup.astro";
 // export { default as SearchBar } from "./components/molecules/SearchBar.astro";
 // export { default as Card } from "./components/molecules/Card.astro";
 
 // ============================================
 // ORGANISMOS
 // ============================================
-// export { default as Header } from "./components/organisms/Header.astro";
-// export { default as Footer } from "./components/organisms/Footer.astro";
+export { default as Header } from "./components/organisms/Header.astro";
+export { default as Footer } from "./components/organisms/Footer.astro";
 
 // ============================================
 // TEMPLATES