# Header Middle Part

## Essence

Transparent middle layer of `Header` that places the primary page navigation.

It exists so Header's primary navigation layer is a named, inspectable component instead of hidden layout inside `Header`.

## Hook

Use when `Header` needs to render primary navigation actions such as `Notes` and `Design System`.

## Status

Private to `Header`

## Contract

- Used only inside `Header`.
- Contains `Header Menu Button` instances.
- Aligns content to the left.
- Has transparent background.
- Uses `--spacing-header-layer-y` top and bottom padding.
- Uses Header horizontal padding: `--spacing-header-left` and `--spacing-header-right`.
- Owns the local horizontal gap between Header menu buttons through `--spacing-header-middle-part-gap`.
- Does not own selected-route calculation; `Header` passes selected state.
- Does not own scroll behavior; `Header` owns the state that hides or reveals this part.
- Does not render the brand/home action.
- Does not render Header Bottom Part.

## Related Components And Patterns

| Item | Relationship | Direction | Notes |
| --- | --- | --- | --- |
| `Header` | Parent | Parent -> Child | Header composes this part as its primary navigation layer. |
| `Header Menu Button` | Composes | Component -> Child | Provides route navigation actions. |

## Code Paths

- `packages/design-system/src/components/HeaderMiddlePart.astro`
- `packages/design-system/src/components/Header.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`