Skip to main content
The Header component provides the main navigation bar for the Chapinismos site. It includes the site logo, navigation menu, language switcher, and theme toggle, with responsive behavior for mobile and desktop views.

​
Import

import Header from "../components/Header.astro";

​
Usage

The Header component is typically used in the Base layout and doesn’t require any props:
src/layouts/Base.astro
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<!doctype html>
<html lang={lang} data-theme="dark">
  <head>
    <!-- ... -->
  </head>
  <body>
    <Header />
    <main id="main-content" role="main">
      <slot />
    </main>
    <Footer />
  </body>
</html>

​
Props

The Header component does not accept any props. It automatically detects the current language from the URL using getLangFromUrl(Astro.url).

​
Features

​
Language Detection

The component automatically detects the current language and sets the appropriate URL prefix: 
const lang = getLangFromUrl(Astro.url);
const prefix = lang === "en" ? "/en" : "/es";

​
Responsive Layout

  • Desktop: Shows full navigation with all controls inline
  • Mobile: Shows language switcher, theme toggle, and mobile menu button

​
Components Included

  • Logo: Site branding that links to the home page
  • Navigation: Main navigation links (desktop only)
  • LanguageSwitcher: Toggle between English and Spanish
  • ThemeToggle: Switch between light and dark modes
  • MobileMenu: Hamburger menu for mobile devices

​
Structure

<header class="relative mx-auto max-w-[1100px] px-4 py-4 sm:px-6" transition:persist>
  <div class="flex items-center justify-between gap-4">
    <!-- Logo -->
    <a href={`${prefix}/`} class="flex shrink-0 items-center gap-2">
      <Logo height={75} />
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden items-center gap-2 md:flex">
      <Navigation />
      <LanguageSwitcher />
      <ThemeToggle />
    </nav>

    <!-- Mobile Controls -->
    <div class="flex items-center gap-2 md:hidden">
      <LanguageSwitcher />
      <ThemeToggle isMobile={true} />
      <MobileMenu />
    </div>
  </div>
</header>

​
Analytics

The logo link includes Umami analytics tracking: 
data-umami-event="Logo Click"
data-umami-event-location="header"

​
View Transitions

The header uses Astro’s View Transitions API with transition:persist to maintain state during page navigation: 
<header transition:persist>
  <!-- ... -->
</header>

​
Styling

The component includes custom styles for:
  • Responsive breakpoints using @media (min-width: 480px)
  • Guatemala flag badge styling with theme-aware gradients
  • Drop shadow effects that adapt to dark/light themes
  • Hover states with scale transforms

Build docs developers (and LLMs) love

Get started for freeTalk to us