Skip to main content

​
Header

The Header.astro component provides the main navigation bar for Proyecto Renacer. It features a sticky header with the site logo, navigation menu, and a prominent call-to-action button.

​
Location

src/components/Header.astro

​
Props

This component does not accept props. Navigation items are defined internally.

​
Features

The header stays fixed at the top of the viewport with:
  • position: sticky
  • Semi-transparent backdrop with blur effect
  • Border bottom for visual separation
  • z-index of 50 for proper layering
Branded logo with:
  • Material Symbol home_pin icon
  • “RENACER” text in uppercase
  • Primary color scheme
  • Links to homepage
Integrates the Navigation.astro component with predefined menu items: 
const listItems = [
  { tag: "Inicio", link: "/" },
  { tag: "Proyecto", link: "/proyecto" },
  { tag: "Noticias", link: "/noticias" },
  { tag: "Requisitos", link: "/requisitos" },
  { tag: "Contacto", link: "/contacto" },
];

​
Call-to-Action Button

Prominent “Como ser Socio” button with:
  • Primary background color
  • Hover state with reduced opacity
  • Rounded corners and shadow
  • Links to /como-ser-socio

​
Usage

​
Basic Implementation

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<Layout title="Mi Página" description="Descripción de la página">
  <Header />
  <main>
    <!-- Page content -->
  </main>
  <Footer />
</Layout>

​
In Every Page

The Header should be included at the top of every page’s content area, right after the opening <Layout> tag: 
<Layout title={title} description={description}>
  <Header />
  <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
    <main class="flex-1">
      <!-- Your content -->
    </main>
  </div>
  <Footer />
</Layout>

​
Implementation Details

​
HTML Structure

<header class="sticky top-0 z-50 w-full px-4 py-4 flex items-center justify-between border-b border-black/30 bg-background-light/80 backdrop-blur-md dark:bg-background-dark/80 md:px-20 lg:px-40">
  <!-- Logo -->
  <div class="flex items-center gap-2 text-primary">
    <span class="material-symbols-outlined text-3xl">home_pin</span>
    <h2 class="text-xl font-black tracking-tighter uppercase">RENACER</h2>
  </div>
  
  <!-- Navigation -->
  <Navigation listItems={listItems} />
  
  <!-- CTA Button -->
  <div class="flex items-center gap-4">
    <a href="/como-ser-socio" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg text-sm font-bold transition-all shadow-md">
      Como ser Socio
    </a>
  </div>
</header>

​
Styling Features

Responsive Padding:
  • Mobile: px-4
  • Tablet: md:px-20
  • Desktop: lg:px-40
Backdrop Effect: 
bg-background-light/80 backdrop-blur-md
dark:bg-background-dark/80
Dark Mode Support: Automatic color scheme switching for background and borders. The Header uses the Navigation.astro component internally, which:
  • Accepts a listItems array of { tag, link } objects
  • Renders navigation items using NavItem.astro
  • Hidden on mobile (hidden md:flex)
  • Displays horizontally with spacing
<nav class="hidden md:flex items-center gap-8">
  <ul class="flex items-center gap-4">
    {listItems.map(({ tag, link }) => (
      <li>
        <NavItem tag={tag} link={link} />
      </li>
    ))}
  </ul>
</nav>

​
Customization

​
Modifying Navigation Items

To add or remove navigation items, edit the listItems array in Header.astro: 
const listItems = [
  { tag: "Inicio", link: "/" },
  { tag: "Proyecto", link: "/proyecto" },
  { tag: "Nueva Página", link: "/nueva-pagina" }, // Add new item
  { tag: "Requisitos", link: "/requisitos" },
  { tag: "Contacto", link: "/contacto" },
];

​
Changing CTA Button

Modify the button link or text: 
<a href="/custom-link" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg text-sm font-bold transition-all shadow-md">
  Custom Button Text
</a>

​
Accessibility

  • Semantic <header> element
  • Proper <nav> structure
  • Clear navigation hierarchy
  • Sufficient color contrast
  • Focus states on interactive elements

​
Performance

  • Minimal JavaScript (component is static)
  • CSS-only hover effects
  • Efficient backdrop-blur with GPU acceleration
  • Optimized z-index layering