Feature/layout navigation v2#2635
Draft
bramvanderholst wants to merge 7 commits into
Draft
Conversation
…outNavigation Unchaged for now. Changes coming in next commits.
…w local LayoutDefault in new LayoutNavigation Unchaged for now (except import paths). Changes coming in next commits.
… components
LayoutNavigation was a big file that mixed the navigation overlay,
the header content, and the layout shell.
Customizing the header — sticky behavior, owning the container styling,
or adding a beforeHeader slot — required forking the whole file or
copying chunks of @graphcommerce/next-ui's LayoutDefault.
The header is now four reusable pieces:
- HeaderContainer the <Container component='header'> wrapper, lifted
out of LayoutDefault so each project owns its
header container.
- Header the header content (Logo, DesktopNavBar,
DesktopNavActions, MobileTopRight).
- MenuOverlay the NavigationProvider + NavigationOverlay.
- LayoutDefault a local copy that renders the `header` slot raw,
since the wrapping now lives in HeaderContainer.
Keeping LayoutDefault as a project-local copy makes the layout shell
itself customizable: tweaking the grid, the fab container, the
beforeHeader slot or the sticky behavior no longer requires patching
@graphcommerce/next-ui or copying the file — the example owns it.
Combined with the extracted Header / MenuOverlay / HeaderContainer,
projects can override any single piece without forking the rest.
LayoutNavigation becomes a slim orchestrator that composes them.
LayoutMinimal is updated to use the same local LayoutDefault +
HeaderContainer so both layouts share the canonical header pattern.
The previous monolithic version is kept as LayoutNavigationLegacy.tsx.
The active version is selected with a one-line switch in
components/Layout/index.ts:
export * from './LayoutNavigation'
// export * from './LayoutNavigationLegacy'
There is no visual change in the new default path:
HeaderContainer carries the same styling that the
header slot of next-ui's LayoutDefault used to apply.
… customization of the header
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: fddc406 The changes in this PR will be included in the next version bump. This PR includes changesets to release 86 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
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
Refactors
LayoutNavigationin the example storefronts from a single ~180-line fileinto composable pieces and moves the canonical
LayoutDefaultfrom@graphcommerce/next-uiinto each project'scomponents/Layout/. No visual change,no breaking imports.
What's in this PR
LayoutNavigationintoHeader/Header.tsx,Header/HeaderContainer.tsx,MenuOverlay.tsx, and a project-localLayoutDefault.tsx.HeaderContaineris the<Container component='header'>wrapper lifted out ofLayoutDefault, so each projectfully owns its header container (sticky, mobile pointer-events, styling) without
forking next-ui.
Header/andFooter/live in their own subfolders so future additions(mega menu, mobile-only header, extra footer columns) don't require further moves.
LayoutMinimaluses the same localLayoutDefault+HeaderContaineras thecanonical pattern.
disableScrollEffectsprop added toCartFabandNavigationFab, which makesit easier to drop them into a fully-custom header.
@graphcommerce/next-ui'sLayoutDefaultis marked@deprecated. Theimplementation stays in place; the deprecation only points consumers at the local copy
they already have after a sync.
Migration
Old monolithic version is kept as
LayoutNavigationLegacy.tsx. To revert, flip one linein
components/Layout/index.ts: