patterntypescriptastroModerate
Astro component restructuring: moving header inside page flow
Viewed 0 times
header layoutdesign mockup alignmentcomponent restructuringstat deltasconditional stylinggraph view toggle
Problem
When aligning a live Astro site to a design mockup, the header was a full-width fixed bar (border-bottom, bg-secondary, fixed height/padding) while the design placed it inside the .app content container with matching max-width and padding. Moving the header into the content flow required updating both the component styles and the page layout, plus preserving a separate fixed-header mode for an alternate view (graph-active state).
Solution
- Move <Header /> from outside the .app div to inside it (before SearchBar). 2. In Header.astro, replace full-width bar styles (padding, height, border-bottom, background) with just margin-bottom: 32px. 3. For the alternate graph-active fixed state, re-apply position:fixed, padding, height, and border-bottom using :global(body.graph-active) .header selector — these override the default in-flow styles only when needed. 4. For stat card deltas, calculate time-window counts in the page frontmatter and pass as props (monthlyEntries, weeklyDelta) to the Stats component. Use .up/.down CSS classes with color: var(--green) and var(--red).
Why
Astro components use scoped styles by default but :global() for cross-component selectors. When a component needs two layout modes (in-flow vs fixed), keep the default mode simple and override specifically for the alternate mode rather than trying to share styles between both.
Gotchas
- When moving a header from fixed/full-width to in-flow, any alternate view that needs it fixed must explicitly re-add all positioning styles (position, top, left, right, z-index, padding, height) since the defaults are gone
- Stat delta props need to flow from page-level data fetching through to the component — Astro has no global state, so every computed value must be explicitly passed as a prop
Revisions (0)
No revisions yet.