# Header Bottom Part

## Essence

Optional Header-side mobile navigation control used by the Design System component page experience.

It is documented under `Header` because it is the optional bottom part of the Header composition. In the current implementation it is optionally rendered inside Header's bottom extension layer and controls whether the `Component Page` mobile menu overlay is visible. When the menu is hidden it shows `Component list`; when the menu is visible it shows `Back`.

## Hook

Use when the Design System page needs a Header-adjacent mobile-only control that opens or closes the component menu overlay while staying outside the scrollable menu area.

## Status

Private

## Aliases

- Component page menu navigation
- Mobile component list control
- Former `Menu Container Header`

## Contract

- Documented under `Header` in the Design System hierarchy.
- Used only for the Design System component page mobile menu.
- Visible only on Mobile breakpoint.
- Rendered as Header's optional bottom extension on the actual Design System page.
- Never rendered inside `Component Page`, including local Component Page previews.
- When a preview needs this control, compose it through Header or an explicit Header-owned preview frame.
- Stays outside `Menu Container`.
- Stays outside the scrollable `Menu` area.
- Stays visible when the menu overlay is open.
- Never scrolls away when it is visible.
- Uses `Icon and Label Button` internally.
- Uses `Icon and Label Button` with `Accent = alt` because it is nested inside Header.
- Does not define its own background color; background comes from `Header`.
- Uses the same left and right padding as Header's brand and primary navigation layers through `--spacing-header-left` and `--spacing-header-right`.
- Uses `--spacing-header-layer-y` top and bottom padding.
- Has state `Menu visible = false | true`.
- If `Menu visible = false`, shows `Component list` with the List icon.
- If `Menu visible = true`, shows `Back` with the Chevron Left icon.
- Does not own menu content, menu scrolling, selected state, or route state.
- Does not own overlay state; `Component Page` owns the state.

## Ownership

| Owner | Responsibilities |
| --- | --- |
| Component | Owns the visible mobile navigation bar, state-specific label/icon, and Header-aligned horizontal padding. |
| Header hierarchy | Owns where Header Bottom Part is documented, discovered, and visually nested on actual pages. |
| Component Page | Owns mobile overlay state and listens to this component when it is supplied externally. |
| Icon and Label Button | Owns icon + label button visuals and interaction states. |
| Menu Container | Owns menu scroll/resize container only; it does not use this component. |

## Public Props

- `menuVisible`: boolean state that switches the visible action.

## Preview-Only Context

- `Menu visible` switcher demonstrates `false` and `true` states.

## Internal Rules

- Keep this component private to the Design System page experience.
- Keep it nested under `Header` in the Design System menu hierarchy.
- On actual pages, render it through Header's optional bottom extension layer.
- Do not render this component inside `Component Page`.
- Do not render this component inside `Menu Container`.
- Render `Icon and Label Button` directly inside the navigation area.
- Use List icon for `Menu visible = false`.
- Use Chevron Left icon for `Menu visible = true`.
- Do not set a local background; inherit the surface from `Header`.
- Do not set a local separator.
- Keep horizontal padding aligned with Header layers through Header spacing tokens.
- Keep top and bottom padding at `--spacing-header-layer-y`.
- Height follows the compact navigation height assumption: `2.5rem`.
- On Mobile overlay, keep this component sticky/visible while the menu content scrolls below it.
- Do not include this component in Header's hidden/peeked motion stack.

## Non-Goals

- Does not replace `Header`.
- Does not replace `Menu Container`.
- Does not replace `Menu`.
- Does not define route selection.
- Does not own menu scroll behavior.

## Use When

- The Design System page is in Mobile mode and needs a way to open the component list.
- The component menu overlay is open and needs a visible Back action.

## Do Not Use When

- Rendering a standalone page header.
- Rendering a menu item inside `Menu`.
- Rendering inside `Menu Container`.
- A component needs a generic icon + label action outside Component Page.

## Edge Cases

- If `Component Page` overlay behavior changes, this component state mapping must be reviewed.
- If Header subnavigation height becomes a token, this component should consume that token instead of relying on `2.5rem`.
- If menu navigation needs route-aware labels later, route state must stay in the parent.

## Accessibility Notes

- The visible label carries the accessible name.
- The icon is decorative.
- `Component list` exposes the open action.
- `Back` exposes the close action.
- `Component Page` owns focus handoff when opening or closing the overlay.

## Token Dependencies

- `--spacing-header-left`
- `--spacing-header-right`
- `--spacing-header-layer-y`
- `2.5rem` compact navigation height assumption

## Related Components And Patterns

| Item | Relationship | Direction | Notes |
| --- | --- | --- | --- |
| `Header` | Optional Child | Parent -> Child | Header Bottom Part is grouped under Header and may render in Header's bottom extension layer. |
| `Component Page` | Runtime State Owner | Header -> Component Page | Component Page owns overlay state and responds to external Header-owned controls. |
| `Component Detail Body` | Adjacent | Header -> Component | Header Bottom Part sits above the Component Page main area on Mobile. |
| `Menu Container` | Adjacent | Component <-> Component | Menu Container scrolls below it; it does not use Header Bottom Part. |
| `Icon and Label Button` | Composes | Component -> Child | Provides the visible action. |

## Change Impact

| Change | Risk | Review Needed |
| --- | --- | --- |
| Changing state names | Medium | Check Component Page preview controls and behavior docs. |
| Changing height | Medium | Check mobile overlay top offset and sticky behavior. |
| Moving into Menu Container | High | Violates ownership and scroll-area separation. |

## Source Of Truth

| Source | Path / Link | Notes |
| --- | --- | --- |
| Component implementation | `packages/design-system/src/components/HeaderBottomPart.astro` | Primary layout source. |
| Header component | `packages/design-system/src/components/Header.astro` | Hierarchy owner for Header-related navigation. |
| Runtime state owner | `packages/design-system/src/components/ComponentPage.astro` | Overlay state owner; does not render Header Bottom Part internally. |
| DS page | `apps/portfolio-site/src/pages/design-system/index.astro` | Visible documentation and preview. |
| Relationship map | `docs/design-system/maps/component-relationship-map.md` | Component relationships. |

## Rule Confidence

| Rule | Evidence | Confidence |
| --- | --- | --- |
| Nested under Header | User explicitly asked to keep Header Bottom Part under Header component. | High |
| Menu visible state | User explicitly requested `Menu visible = true, false`. | High |
| Not part of scrollable area | User explicitly requested this. | High |
| Menu Container must not use it | User explicitly requested this. | High |

## Open Questions

- Should the visible label be `Component list` or a shorter final name later?

## Code Paths

- `packages/design-system/src/components/HeaderBottomPart.astro`
- `packages/design-system/src/components/ComponentPage.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`
- `apps/portfolio-site/src/pages/design-system/essences/[slug].md.ts`
- `docs/design-system/maps/component-relationship-map.md`

## Validation Checklist

- [x] Canonical name is clear
- [x] Aliases are captured
- [x] Contract is explicit
- [x] Ownership is separated
- [x] Public props are separated from preview-only context
- [x] Token dependencies are listed
- [x] Related items use typed relationships
- [x] Accessibility notes are present
- [x] Change impact is described
- [x] Code paths are listed
- [x] DS page link is updated
- [x] Route slug is updated
- [x] Relationship map is updated