feat(PageHeader): compact layout variant voor large viewport#150
Merged
jeffreylauwers merged 1 commit intomainfrom Apr 10, 2026
Merged
feat(PageHeader): compact layout variant voor large viewport#150jeffreylauwers merged 1 commit intomainfrom
jeffreylauwers merged 1 commit intomainfrom
Conversation
- Voegt `layout="compact"` toe: één enkele rij met logo (inline-start), primaire navigatie (gecentreerd via CSS-grid 1fr auto 1fr) en servicemenu + icon-only zoekknop (inline-end) - Zoekknop compact is icon-only; paneel hergebruikt dsn-page-header__search-panel - Drop-shadow op sticky/auto-hide header zodra content eronder schuift (data-scrolled attribuut via scroll listener, CSS box-shadow transitie) - `initialSearchOpen` prop voor initiële open-staat zoekpaneel - RTL stories met Arabische navigatieteksten via rtlDecorator - WithStickyHeader en WithAutoHide stories tonen paginacontent voor scroll-test - WithSearchOpen toont paneel direct open via initialSearchOpen - Contact verwijderd uit secondaryNavigation Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
layout="compact"toe aan PageHeader: één enkele rij met logo (inline-start), primaire navigatie (optisch gecentreerd via CSS-grid1fr auto 1fr) en servicemenu + icon-only zoekknop (inline-end) op viewports ≥ 64emdata-scrolledattribuut + CSS box-shadow transitie)initialSearchOpenprop voor initiële open-staat van het zoekpaneelrtlDecoratorWijzigingen
Design tokens (
page-header.json):compact.background-color,compact.padding-block,compact.padding-inlineCSS (
page-header.css):.dsn-page-header--compactmodifier +.dsn-page-header__compact-layout/__compact-inner/__compact-primary-nav/__compact-secondary.dsn-page-header__compact-inner .dsn-page-header__logo)border-block-endhersteld op large viewport voor compact variantbox-shadowtransitie op--stickyen--auto-hide; actief via[data-scrolled='true']Component (
PageHeader.tsx):layout?: 'default' | 'compact'propinitialSearchOpen?: booleanpropprimaryNavigationLarge ?? primaryNavigationzodat Drawer altijd de verticale variant ontvangtdata-scrolledvoor sticky én auto-hideStories (
PageHeader.stories.tsx):CompactLayout,WithStickyHeader(+ content),WithAutoHide(+ content),WithSearchOpen(direct open)rtlDecorator+ Arabische navigatietekstenTest plan
initialSearchOpen={true}: paneel direct openCloses #147
🤖 Generated with Claude Code