# Header & Footer Variants

## Header & Footer Variants

Techlo does not have separate header components per page. Instead, a single `Header.astro` renders one of three **layout presets**, and pages opt into them through `Base.astro`.

This is easy to miss because the page files just pass short values like `headerLayout="two"` and `headerPosition="fixed"`.

### Variant Switching In `Base.astro`

The base layout accepts these props (among others):

```ts
// src/layouts/Base.astro
interface Props {
  headerLayout?: "one" | "two" | "three"; // default: "two"
  headerPosition?: "fixed" | "static" | "sticky"; // default: "sticky"
  hasFooterDarkBackground?: boolean;
  hideOffcanvas?: boolean;
}
```

It then forwards them to the shared `Header` component, which resolves a preset from its internal `layoutConfig` map.

### The Three Header Presets

`src/layouts/components/global/header/Header.astro` defines a `layoutConfig` object describing each preset:

#### Header One

- Primary (blue) topbar showing **office hours**
- Dark appearance — automatically uses `logoAlternate`
- Menu aligned right, desktop toggler shown
- Language switcher shown, navigation CTA button hidden
- Used by **Home 01**

#### Header Two

- Light topbar showing the **address / location**
- Light appearance with the default `logo`
- Navigation CTA button shown (label from `navigation.buttonLabel`)
- Language switcher shown, desktop toggler hidden
- Used by **Home 02** and most inner pages (it is the default)

#### Header Three

- Navy, compact topbar showing **office hours**
- Transparent + dark appearance over the hero
- Navigation CTA button shown, language switcher hidden
- Used by **Home 03**

### Header Position

Independent of the preset, `headerPosition` controls how the header sits on the page:

- `"sticky"` (default) — scroll-aware sticky behavior, respecting `settings.stickyHeader`
- `"fixed"` — pinned over the hero (used by Home 02 and Home 03)
- `"static"` — scrolls away with the page

### The Footer

Techlo uses a **single footer** (`src/layouts/components/global/Footer.astro`) on every page, plus a global `CallToAction` section rendered by `Base.astro` just above it. There is no per-page footer component to choose.

You can still influence the footer’s appearance:

- `hasFooterDarkBackground={true}` renders the footer on a dark background.
- `ctaSpacingTop` toggles the spacing above the global call-to-action.
- The CTA content itself comes from `src/content/sections/<language>/call-to-action.md` and can be overridden per page via the `ctaSection` frontmatter key. In the Tina edition, that is the **Cta Section** block on the home pages. In the Sanity edition, it is the **CTA Section** row on Home 1.

The footer's content is on [Footer](../footer/).

### How To Change A Page’s Header

You can switch a page to another preset directly in the page file:

```astro
<Base {...page.data} headerLayout="three" headerPosition="fixed">
  <slot />
</Base>
```

This is the correct approach if you want a whole page to use a different header, in every edition: which header a page uses isn't in the Tina or Sanity forms. Do not edit the `layoutConfig` presets unless you want that change to affect **every** page using that layout.