From e908398c21b6d00af5f182d9fa21495e583468e6 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 9 Dec 2024 11:28:23 +0100
Subject: [PATCH 1/5] Solve issue if LayoutDefault-children wouldn't fill the
 page, the content would be aligned to the footer. Presence of beforeheader
 would trigger this. Support beforeHeader in LayoutDefault without breaking
 the CartFab and CompareFab.

---
 .changeset/brown-monkeys-lie.md               |  5 ++
 .changeset/kind-drinks-relax.md               |  5 ++
 .../components/LayoutDefault.tsx              | 71 ++++++++++++-------
 3 files changed, 54 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/brown-monkeys-lie.md
 create mode 100644 .changeset/kind-drinks-relax.md

diff --git a/.changeset/brown-monkeys-lie.md b/.changeset/brown-monkeys-lie.md
new file mode 100644
index 0000000000..7955ef500e
--- /dev/null
+++ b/.changeset/brown-monkeys-lie.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Support beforeHeader in LayoutDefault without breaking the CartFab and CompareFab.
diff --git a/.changeset/kind-drinks-relax.md b/.changeset/kind-drinks-relax.md
new file mode 100644
index 0000000000..346c268209
--- /dev/null
+++ b/.changeset/kind-drinks-relax.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Solve issue if LayoutDefault-children wouldn't fill the page, the content would be aligned to the footer. Presence of beforeheader would trigger this.
diff --git a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
index 30fc40b5d1..dbd565d29d 100644
--- a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
+++ b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
@@ -23,7 +23,7 @@ export type LayoutDefaultProps = {
 type OwnerState = {
   noSticky?: boolean
 }
-const parts = ['root', 'fabs', 'header', 'children', 'footer'] as const
+const parts = ['root', 'fabs', 'beforeHeader', 'header', 'children', 'footer'] as const
 const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
   'LayoutDefault',
   parts,
@@ -61,8 +61,13 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             minHeight: '-webkit-fill-available',
           },
           display: 'grid',
-          gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
-          gridTemplateColumns: '100%',
+          gridTemplate: `
+            "beforeHeader" auto
+            "header" auto
+            "fabs" auto
+            "children" 1fr
+            "footer" auto / 100%
+          `,
           background: theme.palette.background.default,
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -70,13 +75,18 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     >
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
-        {beforeHeader}
+        {beforeHeader ? (
+          <Box sx={{ gridArea: 'beforeHeader' }} className={classes.beforeHeader}>
+            {beforeHeader}
+          </Box>
+        ) : null}
         <Container
           sizing='shell'
           maxWidth={false}
           component='header'
           className={classes.header}
           sx={(theme) => ({
+            gridArea: 'header',
             zIndex: theme.zIndex.appBar - 1,
             display: 'flex',
             alignItems: 'center',
@@ -108,27 +118,32 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             sizing='shell'
             maxWidth={false}
             className={classes.fabs}
-            sx={(theme) => ({
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              height: 0,
-              zIndex: 'speedDial',
-              [theme.breakpoints.up('sm')]: {
-                position: 'sticky',
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 - calc(${fabIconSize} / 2))`,
-                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
-              },
-              [theme.breakpoints.down('md')]: {
-                position: 'fixed',
-                top: 'unset',
-                bottom: `calc(20px + ${fabIconSize})`,
-                padding: '0 20px',
-                '@media (max-height: 530px) and (orientation: portrait)': {
-                  display: 'none',
+            sx={(theme) => {
+              const negativeHeaderHeightMd = `(${theme.appShell.headerHeightMd} * -1)`
+              const topMd = `(${theme.appShell.headerHeightMd}  - ${fabIconSize}) / 2`
+
+              return {
+                gridArea: 'fabs',
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+                height: 0,
+                zIndex: 'speedDial',
+                [theme.breakpoints.up('md')]: {
+                  position: 'sticky',
+                  marginTop: `calc(${negativeHeaderHeightMd} + ${topMd})`,
+                  top: `calc(${topMd})`,
                 },
-              },
-            })}
+                [theme.breakpoints.down('md')]: {
+                  position: 'fixed',
+                  bottom: `calc(20px + ${fabIconSize})`,
+                  padding: '0 20px',
+                  '@media (max-height: 530px) and (orientation: portrait)': {
+                    display: 'none',
+                  },
+                },
+              }
+            }}
           >
             {menuFab}
             {cartFab && (
@@ -150,11 +165,13 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ) : (
           <div />
         )}
-        <div className={classes.children}>
+        <Box sx={{ gridArea: 'children' }} className={classes.children}>
           <div id='skip-nav' tabIndex={-1} />
           {children}
-        </div>
-        <div className={classes.footer}>{footer}</div>
+        </Box>
+        <Box sx={{ gridArea: 'footer' }} className={classes.footer}>
+          {footer}
+        </Box>
       </LayoutProvider>
     </Box>
   )

From c7cc9d98adf38a4ec60d6dc7dae34d577e409505 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 9 Dec 2024 14:40:40 +0100
Subject: [PATCH 2/5] Revert theme colors back to original style

---
 examples/magento-graphcms/components/theme.ts |  4 ++--
 packages/next-ui/Theme/createTheme.ts         | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/magento-graphcms/components/theme.ts b/examples/magento-graphcms/components/theme.ts
index 08a53157a1..a17c6d6e75 100644
--- a/examples/magento-graphcms/components/theme.ts
+++ b/examples/magento-graphcms/components/theme.ts
@@ -19,9 +19,9 @@ import { Components, PaletteOptions } from '@mui/material/styles'
 const lightPalette: PaletteOptions = {
   mode: 'light',
   primary: {
-    main: '#000000',
+    main: '#47C489',
     contrastText: '#ffffff',
-    dark: '#000000',
+    dark: '#47C489',
   },
   secondary: {
     main: '#006bff',
diff --git a/packages/next-ui/Theme/createTheme.ts b/packages/next-ui/Theme/createTheme.ts
index 2fe431a2d8..d4f2965718 100644
--- a/packages/next-ui/Theme/createTheme.ts
+++ b/packages/next-ui/Theme/createTheme.ts
@@ -1,4 +1,4 @@
-import { Breakpoint } from '@mui/material'
+import type { Breakpoint } from '@mui/material'
 
 export {}
 
@@ -28,7 +28,15 @@ declare module '@mui/material/styles/createTheme' {
       headerHeightMd: string
       appBarHeightMd: string
       appBarInnerHeightMd: string
+      /**
+       * Sizing of the shell of the application. Provide a breakpoint to use the breakpoint value or
+       * false to disable the breakpoint.
+       */
       containerSizingShell: false | Breakpoint | undefined
+      /**
+       * Sizing of the content of the application. Provide a breakpoint to use the breakpoint value
+       * or false to disable the breakpoint.
+       */
       containerSizingContent: false | Breakpoint | undefined
     }
 

From 6380ea50c5da16a115817439accbe96f56ac5012 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 9 Dec 2024 14:50:21 +0100
Subject: [PATCH 3/5] Working on sticky header

---
 .../components/Layout/LayoutNavigation.tsx    | 37 +++++++-
 .../ProductListLayoutDefault.tsx              | 13 +--
 .../ProductListLayoutSidebar.tsx              |  3 +-
 examples/magento-graphcms/pages/[...url].tsx  |  1 -
 .../components/LayoutDefault.tsx              | 91 ++++++++++++++-----
 5 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
index b5466e3c33..9f1b8802fe 100644
--- a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -21,10 +21,11 @@ import {
   NavigationOverlay,
   useNavigationSelection,
   useMemoDeep,
+  Container,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Divider, Fab } from '@mui/material'
+import { Divider, Fab, Link } from '@mui/material'
 import { useRouter } from 'next/router'
 import { Footer } from './Footer'
 import { LayoutQuery } from './Layout.gql'
@@ -117,7 +118,39 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
 
       <LayoutDefault
         {...uiProps}
-        noSticky={router.asPath.split('?')[0] === '/'}
+        stickyHeader={router.asPath.split('?')[0] !== '/'}
+        sx={(theme) => ({
+          [theme.breakpoints.up('md')]: {
+            '& .LayoutDefault-header.stickyHeader': {
+              bgcolor: 'background.default',
+              boxShadow: 1,
+
+              // bgcolor: 'hsl(0deg 0% 100% / 0.95)',
+              // '&::before': {
+              //   height: '200%',
+              //   content: '""',
+              //   display: 'block',
+              //   position: 'absolute',
+              //   inset: 0,
+              //   WebkitBackdropFilter: 'blur(16px)',
+              //   backdropFilter: 'blur(16px)',
+              //   background: 'linear-gradient(to bottom, hsl(0deg 0% 95%), transparent 50%)',
+              //   pointerEvents: 'none',
+              //   WebkitMaskImage: 'linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)',
+              //   maskImage: 'linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)',
+              // },
+            },
+          },
+        })}
+        beforeHeader={
+          <Container sx={{ py: { xs: 0, md: 1 }, position: 'relative', textWrap: 'balance' }}>
+            You are looking at the{' '}
+            <Link color='inherit' underline='always' href='https://graphcommerce.org'>
+              GraphCommerce
+            </Link>{' '}
+            demo environment
+          </Container>
+        }
         header={
           <>
             <Logo />
diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
index 76d5996ead..22b4470e7d 100644
--- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
+++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -45,16 +45,17 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
         sx={(theme) => ({
           display: 'grid',
           rowGap: theme.spacings.sm,
+          pt: theme.spacings.sm,
           mb: theme.spacings.sm,
           gridAutoFlow: 'row',
-          justifyItems: { xs: 'left', md: 'center' },
+          justifyItems: { xs: 'center', md: 'center' },
         })}
       >
         {import.meta.graphCommerce.breadcrumbs && category && (
           <CategoryBreadcrumbs
             category={category}
             sx={(theme) => ({
-              height: 0,
+              // height: 0,
               [theme.breakpoints.down('md')]: {
                 '& .MuiBreadcrumbs-ol': { justifyContent: 'center' },
               },
@@ -65,9 +66,9 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
         {category ? (
           <>
             <LayoutTitle
-              gutterTop
+              gutterTop={false}
               variant='h1'
-              sx={{ alignItems: { xs: 'left', md: 'center' } }}
+              // sx={{ alignItems: { xs: 'center', md: 'center' } }}
               gutterBottom={false}
             >
               {title}
@@ -75,13 +76,13 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
             <CategoryDescription
               textAlignMd='center'
               textAlignSm='center'
-              sx={(theme) => ({ px: theme.page.horizontal })}
+              // sx={(theme) => ({ px: theme.page.horizontal })}
               description={category?.description}
             />
             <CategoryChildren
               sx={(theme) => ({
                 justifyContent: 'center',
-                '& .CategoryChildren-scroller': { px: theme.page.horizontal },
+                // '& .CategoryChildren-scroller': { px: theme.page.horizontal },
               })}
               params={params}
             >
diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx
index 7084773c20..3286bd9fe8 100644
--- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx
+++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx
@@ -85,6 +85,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
             display: 'grid',
             gridAutoFlow: 'row',
             rowGap: theme.spacings.xs,
+            pt: theme.spacings.md,
           })}
         >
           {category ? (
@@ -168,7 +169,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
           display='block'
           sx={(theme) => ({
             gridArea: 'sidebar',
-            mt: import.meta.graphCommerce.breadcrumbs === true ? 0 : theme.spacings.lg,
+            mt: import.meta.graphCommerce.breadcrumbs === true ? 0 : theme.spacings.xl,
           })}
         >
           <ProductFiltersProClearAll sx={{ alignSelf: 'center' }} />
diff --git a/examples/magento-graphcms/pages/[...url].tsx b/examples/magento-graphcms/pages/[...url].tsx
index 22dc1247f9..3534f0b7bb 100644
--- a/examples/magento-graphcms/pages/[...url].tsx
+++ b/examples/magento-graphcms/pages/[...url].tsx
@@ -69,7 +69,6 @@ function CategoryPage(props: CategoryProps) {
   const page = pages?.[0]
   const isCategory = params && category && products?.items
 
-  console.log(page?.asset)
   return (
     <InContextMaskProvider mask={productList.mask}>
       <CategoryMeta
diff --git a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
index dbd565d29d..7af5648aca 100644
--- a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
+++ b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
@@ -16,14 +16,23 @@ export type LayoutDefaultProps = {
   menuFab?: React.ReactNode
   cartFab?: React.ReactNode
   children?: React.ReactNode
-  noSticky?: boolean
   sx?: SxProps<Theme>
 } & OwnerState
 
 type OwnerState = {
-  noSticky?: boolean
+  stickyHeader?: boolean
 }
-const parts = ['root', 'fabs', 'beforeHeader', 'header', 'children', 'footer'] as const
+
+const parts = [
+  'root',
+  'fabs',
+  'beforeHeader',
+  'header',
+  'children',
+  'footer',
+  'cartFab',
+  'menuFab',
+] as const
 const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
   'LayoutDefault',
   parts,
@@ -37,7 +46,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     footer,
     menuFab,
     cartFab,
-    noSticky,
+    stickyHeader = false,
     className,
     sx = [],
   } = props
@@ -48,7 +57,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     ([y, offset]: number[]) => y + offset,
   )
 
-  const classes = withState({ noSticky })
+  const classes = withState({ stickyHeader })
   const fabIconSize = useFabSize('responsive')
 
   return (
@@ -69,6 +78,17 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             "footer" auto / 100%
           `,
           background: theme.palette.background.default,
+
+          // '&.stickyHeader .LayoutHeaderContent-content': {
+          //   [theme.breakpoints.up('md')]: {
+          //     pt: theme.spacings.sm,
+          //   },
+          // },
+          // '&.stickyHeader .CompareFab-root': {
+          //   [theme.breakpoints.up('md')]: {
+          //     mt: theme.spacings.sm,
+          //   },
+          // },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
@@ -92,9 +112,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             alignItems: 'center',
             justifyContent: 'center',
             height: theme.appShell.headerHeightSm,
-            pointerEvents: 'none',
+            pointerEvents: 'none' as const,
             '& > *': {
-              pointerEvents: 'all',
+              pointerEvents: 'all' as const,
+              zIndex: theme.zIndex.appBar,
             },
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.headerHeightMd,
@@ -103,8 +124,8 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               justifyContent: 'left',
               width: '100%',
             },
-            '&.sticky': {
-              [theme.breakpoints.down('md')]: {
+            '&.stickyHeader': {
+              [theme.breakpoints.up('md')]: {
                 position: 'sticky',
                 top: 0,
               },
@@ -128,7 +149,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 justifyContent: 'space-between',
                 width: '100%',
                 height: 0,
-                zIndex: 'speedDial',
+                zIndex: theme.zIndex.appBar,
                 [theme.breakpoints.up('md')]: {
                   position: 'sticky',
                   marginTop: `calc(${negativeHeaderHeightMd} + ${topMd})`,
@@ -145,18 +166,36 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               }
             }}
           >
-            {menuFab}
+            <Box
+              className={classes.menuFab}
+              sx={{ '&.stickyHeader > *': { display: { md: 'none' } } }}
+            >
+              {menuFab}
+            </Box>
             {cartFab && (
               <Box
-                sx={(theme) => ({
-                  display: 'flex',
-                  flexDirection: 'row-reverse',
-                  gap: theme.spacings.sm,
-                  [theme.breakpoints.up('md')]: {
-                    flexDirection: 'column',
-                    alignItems: 'flex-end',
-                  },
-                })}
+                className={classes.cartFab}
+                sx={(theme) => {
+                  const topMd = `(${theme.appShell.headerHeightMd}  - ${fabIconSize}) / 2`
+                  return {
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+
+                    [theme.breakpoints.down('md')]: {
+                      columnGap: theme.spacings.sm,
+                    },
+
+                    [theme.breakpoints.up('md')]: {
+                      rowGap: `calc(${topMd})`,
+                      '&.stickyHeader': {
+                        rowGap: `calc(${topMd} + ${theme.spacings.sm})`,
+                      },
+
+                      flexDirection: 'column',
+                      alignItems: 'flex-end',
+                    },
+                  }
+                }}
               >
                 {cartFab}
               </Box>
@@ -165,7 +204,17 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ) : (
           <div />
         )}
-        <Box sx={{ gridArea: 'children' }} className={classes.children}>
+        <Box
+          sx={(theme) => ({
+            gridArea: 'children',
+            '&.stickyHeader': {
+              [theme.breakpoints.up('md')]: {
+                pt: theme.spacings.sm,
+              },
+            },
+          })}
+          className={classes.children}
+        >
           <div id='skip-nav' tabIndex={-1} />
           {children}
         </Box>

From 7fc22c69e190eb6987078a4afc6d319689c775e2 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 9 Dec 2024 14:58:54 +0100
Subject: [PATCH 4/5] Clear background blur stuff

---
 .../components/Layout/LayoutNavigation.tsx        | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
index 9f1b8802fe..c428e9468f 100644
--- a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -124,21 +124,6 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
             '& .LayoutDefault-header.stickyHeader': {
               bgcolor: 'background.default',
               boxShadow: 1,
-
-              // bgcolor: 'hsl(0deg 0% 100% / 0.95)',
-              // '&::before': {
-              //   height: '200%',
-              //   content: '""',
-              //   display: 'block',
-              //   position: 'absolute',
-              //   inset: 0,
-              //   WebkitBackdropFilter: 'blur(16px)',
-              //   backdropFilter: 'blur(16px)',
-              //   background: 'linear-gradient(to bottom, hsl(0deg 0% 95%), transparent 50%)',
-              //   pointerEvents: 'none',
-              //   WebkitMaskImage: 'linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)',
-              //   maskImage: 'linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)',
-              // },
             },
           },
         })}

From ec11e25ab9bae8e08028fe472c448a227277d5df Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Wed, 11 Dec 2024 12:51:13 +0100
Subject: [PATCH 5/5] Further work on sticky header functionality

---
 .changeset/polite-plums-breathe.md            |   5 -
 .changeset/pre.json                           |   1 -
 .../components/Layout/LayoutNavigation.tsx    |  35 ++-
 .../components/Layout/LayoutNavigation.tsx    |   7 +-
 .../framer-utils/components/StickyBox.tsx     |  35 +++
 .../framer-utils/hooks/useMakeFullscreen.ts   |  37 +++
 packages/framer-utils/hooks/useMotionRect.ts  |  73 ++++++
 packages/framer-utils/hooks/useStickyTop.ts   | 103 ++++++++
 packages/framer-utils/index.ts                |   6 +-
 packages/framer-utils/package.json            |   2 +
 packages/framer-utils/utils/numberToPx.ts     |   3 +
 .../components/CartFab/CartFab.tsx            |   4 +-
 .../CategoryChildren/CategoryChildren.tsx     |   3 +-
 .../plugins/AddCompareFabNextToCart.tsx       |   2 +-
 .../next-ui/FramerScroller/SidebarGallery.tsx |  21 +-
 .../components/LayoutDefault.tsx              | 221 +++++++++---------
 16 files changed, 424 insertions(+), 134 deletions(-)
 delete mode 100644 .changeset/polite-plums-breathe.md
 create mode 100644 packages/framer-utils/components/StickyBox.tsx
 create mode 100644 packages/framer-utils/hooks/useMakeFullscreen.ts
 create mode 100644 packages/framer-utils/hooks/useMotionRect.ts
 create mode 100644 packages/framer-utils/hooks/useStickyTop.ts
 create mode 100644 packages/framer-utils/utils/numberToPx.ts

diff --git a/.changeset/polite-plums-breathe.md b/.changeset/polite-plums-breathe.md
deleted file mode 100644
index cbe2b93722..0000000000
--- a/.changeset/polite-plums-breathe.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@graphcommerce/magento-graphcms': patch
----
-
-Add maxWidth to ProductListLayouts
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 422f58d537..be5de7a2d0 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -229,7 +229,6 @@
     "pink-students-greet",
     "polite-crabs-cry",
     "polite-kiwis-wash",
-    "polite-plums-breathe",
     "poor-masks-learn",
     "poor-plants-look",
     "poor-swans-sip",
diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
index c428e9468f..b002b4f3fa 100644
--- a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -30,6 +30,7 @@ import { useRouter } from 'next/router'
 import { Footer } from './Footer'
 import { LayoutQuery } from './Layout.gql'
 import { Logo } from './Logo'
+import { StickyBox } from '@graphcommerce/framer-utils'
 
 export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
@@ -118,22 +119,43 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
 
       <LayoutDefault
         {...uiProps}
-        stickyHeader={router.asPath.split('?')[0] !== '/'}
         sx={(theme) => ({
           [theme.breakpoints.up('md')]: {
-            '& .LayoutDefault-header.stickyHeader': {
+            '& .sticky': {
               bgcolor: 'background.default',
               boxShadow: 1,
             },
           },
         })}
+        // stickyHeader={router.asPath.split('?')[0] !== '/'}
+        stickyAfterHeader
+        // stickyBeforeHeader
         beforeHeader={
-          <Container sx={{ py: { xs: 0, md: 1 }, position: 'relative', textWrap: 'balance' }}>
+          <Container
+            sx={{
+              py: { xs: 0, md: 1 },
+              position: 'relative',
+              boxShadow: 1,
+              textAlign: { xs: 'center', md: 'left' },
+            }}
+          >
             You are looking at the{' '}
             <Link color='inherit' underline='always' href='https://graphcommerce.org'>
               GraphCommerce
             </Link>{' '}
-            demo environment
+            demo
+          </Container>
+        }
+        afterHeader={
+          <Container
+            sx={{
+              py: { xs: 0, md: 1 },
+              position: 'relative',
+              boxShadow: 1,
+              textAlign: { xs: 'center', md: 'left' },
+            }}
+          >
+            This is a demo store, no actual products are being shipped.
           </Container>
         }
         header={
@@ -176,13 +198,12 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
               </Fab>
               <WishlistFab icon={<IconSvg src={iconHeart} size='large' />} />
               <CustomerFab guestHref='/account/signin' authHref='/account' />
-              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
-              {cartEnabled && <PlaceholderFab />}
+              <PlaceholderFab />
             </DesktopNavActions>
           </>
         }
-        footer={<Footer footer={footer} />}
         cartFab={<CartFab />}
+        footer={<Footer footer={footer} />}
         menuFab={<NavigationFab onClick={() => selection.set([])} />}
       >
         {children}
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
index d6a14b678e..0960a86703 100644
--- a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
@@ -9,6 +9,9 @@ import {
   DesktopNavActions,
   DesktopNavBar,
   DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
   IconSvg,
   LayoutDefault,
   MenuFabSecondaryItem,
@@ -16,9 +19,6 @@ import {
   NavigationOverlay,
   NavigationProvider,
   PlaceholderFab,
-  iconChevronDown,
-  iconCustomerService,
-  iconHeart,
   useMemoDeep,
   useNavigationSelection,
 } from '@graphcommerce/next-ui'
@@ -117,7 +117,6 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
 
       <LayoutDefault
         {...uiProps}
-        noSticky={router.asPath.split('?')[0] === '/'}
         header={
           <>
             <Logo />
diff --git a/packages/framer-utils/components/StickyBox.tsx b/packages/framer-utils/components/StickyBox.tsx
new file mode 100644
index 0000000000..e05727407a
--- /dev/null
+++ b/packages/framer-utils/components/StickyBox.tsx
@@ -0,0 +1,35 @@
+import { Box, useForkRef } from '@mui/material'
+import type { BoxProps } from '@mui/material/Box'
+import clsx from 'clsx'
+import { px } from 'framer-motion'
+import React, { useRef } from 'react'
+import type { StickyStackConfig } from '../hooks/useStickyTop'
+import { useStickyTop } from '../hooks/useStickyTop'
+import { numberToPx } from '../utils/numberToPx'
+
+export const StickyBox = React.forwardRef<
+  HTMLDivElement,
+  BoxProps & {
+    stickyConfig: Omit<StickyStackConfig<HTMLDivElement>, 'ref'>
+  }
+>((props, forwardedRef) => {
+  const { sx, children, className, stickyConfig, ...rest } = props
+  const ref = useRef<HTMLDivElement>(null)
+  const forkedRef = useForkRef(forwardedRef, ref)
+  const top = useStickyTop({ ref, ...stickyConfig })
+
+  return (
+    <Box
+      ref={forkedRef}
+      style={{ '--top': px.transform(top) }}
+      sx={[
+        { '&.sticky': { position: 'sticky', top: 'var(--top, 0px)' } },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      className={clsx(className, stickyConfig.sticky && 'sticky')}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+})
diff --git a/packages/framer-utils/hooks/useMakeFullscreen.ts b/packages/framer-utils/hooks/useMakeFullscreen.ts
new file mode 100644
index 0000000000..cc3a50a352
--- /dev/null
+++ b/packages/framer-utils/hooks/useMakeFullscreen.ts
@@ -0,0 +1,37 @@
+import { px } from 'framer-motion'
+import { numberToPx } from '../utils/numberToPx'
+import type { UseMotionRectOptions } from './useMotionRect'
+import { useMotionRect } from './useMotionRect'
+import { useMotionValueValue } from './useMotionValueValue'
+
+type UseMakeFullScreenReturn = {
+  marginTop: string
+  marginBottom: string
+  marginLeft: string
+  marginRight: string
+  margin: `${string} ${string} ${string} ${string}`
+}
+
+/** Calculate negative margin values to make an element fullscreen. */
+export function useMakeFullscreen<E extends HTMLElement>(
+  ref: React.RefObject<E>,
+  options?: UseMotionRectOptions,
+): UseMakeFullScreenReturn {
+  const rect = useMotionRect(ref, options)
+
+  return useMotionValueValue(rect, (r) => {
+    const { top, left, marginBottom, marginRight } = r
+    const mt = numberToPx(top * -1)
+    const mb = numberToPx(marginBottom * -1)
+    const ml = numberToPx(left * -1)
+    const mr = numberToPx(marginRight * -1)
+
+    return {
+      marginTop: mt,
+      marginBottom: mb,
+      marginLeft: ml,
+      marginRight: mr,
+      margin: `${mt} ${mr} ${mb} ${ml}`,
+    }
+  })
+}
diff --git a/packages/framer-utils/hooks/useMotionRect.ts b/packages/framer-utils/hooks/useMotionRect.ts
new file mode 100644
index 0000000000..1bb64f4af7
--- /dev/null
+++ b/packages/framer-utils/hooks/useMotionRect.ts
@@ -0,0 +1,73 @@
+import { useMotionValue } from 'framer-motion'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+
+const emptyRect = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 0,
+  width: 0,
+  marginTop: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginBottom: 0,
+}
+
+export type Rect = typeof emptyRect
+
+export type UseMotionRectOptions = {
+  pause?: boolean
+  windowResize?: boolean
+  resizeObserver?: boolean
+}
+
+export function useMotionRect<E extends HTMLElement>(
+  ref: React.RefObject<E>,
+  options?: UseMotionRectOptions,
+) {
+  const { pause = false, windowResize = true, resizeObserver = false } = options ?? {}
+
+  const motionRect = useMotionValue<Rect>(emptyRect)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!ref?.current || pause) return () => {}
+
+    const onResize = () => {
+      if (ref.current) {
+        const { bottom, right, top, left, height, width } = ref.current.getBoundingClientRect()
+        const { clientHeight, clientWidth } = document.documentElement
+        motionRect.set({
+          top,
+          bottom,
+          left,
+          right,
+          height,
+          width,
+          marginRight: clientWidth - right,
+          marginBottom: clientHeight - bottom,
+          marginTop: top,
+          marginLeft: left,
+        })
+      }
+    }
+    onResize()
+
+    let ro: ResizeObserver | undefined
+    if (resizeObserver) {
+      ro = new ResizeObserver(onResize)
+      ro.observe(ref.current)
+    }
+
+    if (windowResize) {
+      window.addEventListener('resize', onResize)
+    }
+
+    return () => {
+      ro?.disconnect()
+      window.removeEventListener('resize', onResize)
+    }
+  }, [motionRect, pause, ref, windowResize, resizeObserver])
+
+  return motionRect
+}
diff --git a/packages/framer-utils/hooks/useStickyTop.ts b/packages/framer-utils/hooks/useStickyTop.ts
new file mode 100644
index 0000000000..44f972603c
--- /dev/null
+++ b/packages/framer-utils/hooks/useStickyTop.ts
@@ -0,0 +1,103 @@
+import type { MotionValue } from 'framer-motion'
+import { motionValue, useTransform } from 'framer-motion'
+import { numberToPx } from '../utils/numberToPx'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+import type { Rect } from './useMotionRect'
+import { useMotionRect } from './useMotionRect'
+import { useMotionValueValue } from './useMotionValueValue'
+
+type StickyTo = string | null
+type Position = 'end' | 'center'
+
+export type StickyStackConfig<E extends HTMLElement> = {
+  /** Ref for the element to make sticky */
+  ref: React.RefObject<E>
+  /** Name for other sticky elements to provide the in the stickyTo value */
+  name: string
+  /** If it is the first element in the stack, set this to null. */
+  to: StickyTo
+  /** Whether the element should be sticky */
+  sticky?: boolean
+  /** How to position the element relative to the stickyTo element */
+  position?: Position
+}
+
+type StickyItemMeasured = StickyStackConfig<HTMLElement> & { rect: Rect }
+
+/**
+ * We're using a motionValue to store the global sticky stack.
+ *
+ * Any other state management solution with selectors would also work.
+ */
+const stickyContext = motionValue<Record<string, StickyItemMeasured>>({})
+
+function get(stickyName: string | null) {
+  return stickyName ? stickyContext.get()[stickyName] : undefined
+}
+
+function has(stickyName: string) {
+  return stickyContext.get()[stickyName] !== undefined
+}
+
+function set<E extends HTMLElement>(options: StickyStackConfig<E>, rect: MotionValue<Rect>) {
+  const { name, sticky = true, position = 'end' } = options
+  const current = { ...stickyContext.get() }
+  current[name] = { ...options, rect: rect.get(), sticky, position }
+  stickyContext.set(current)
+}
+
+function del<E extends HTMLElement>(options: StickyStackConfig<E>) {
+  const current = { ...stickyContext.get() }
+  delete current[options.name]
+  stickyContext.set(current)
+}
+
+function findStickTo(to: StickyTo) {
+  const sticky = get(to)
+  if (!sticky) return null
+  if (sticky.sticky) return sticky
+  return findStickTo(sticky.to)
+}
+
+/**
+ * An hook that allows you to create a sticky stack of elements.
+ *
+ * It calculates the top value of an element based on the size of elements in the stack before it.
+ */
+export function useStickyTop<E extends HTMLElement>(config: StickyStackConfig<E>) {
+  const rect = useMotionRect(config.ref)
+
+  if (!has(config.name)) set(config, rect)
+
+  useIsomorphicLayoutEffect(() => {
+    const onChange = () => set(config, rect)
+    onChange()
+    rect.on('change', onChange)
+
+    return () => del(config)
+  }, [config, rect])
+
+  return useMotionValueValue(
+    useTransform(() => {
+      const getPosition = (self: StickyItemMeasured | undefined): number => {
+        if (!self?.sticky) return 0
+
+        const to = findStickTo(self?.to)
+        if (!to) return 0
+
+        const pos = self.position ?? 'end'
+        switch (pos) {
+          case 'center':
+            return to.rect.height / 2 - self.rect.height / 2 + getPosition(to)
+          case 'end':
+            return (to.sticky ? to.rect.height : 0) + getPosition(to)
+          default:
+            throw new Error('Invalid position')
+        }
+      }
+
+      return getPosition(get(config.name))
+    }),
+    (v) => v,
+  )
+}
diff --git a/packages/framer-utils/index.ts b/packages/framer-utils/index.ts
index 1f7ae72add..ee2e74e948 100644
--- a/packages/framer-utils/index.ts
+++ b/packages/framer-utils/index.ts
@@ -1,6 +1,8 @@
-export * from './utils/clientSize'
+export * from './components/StickyBox'
 
+export * from './utils/clientSize'
 export * from './utils/styled'
+export * from './utils/numberToPx'
 
 export * from './hooks/useMeasureDynamicViewportSize'
 export * from './hooks/useConstant'
@@ -8,3 +10,5 @@ export * from './hooks/useElementScroll'
 export * from './hooks/useIsomorphicLayoutEffect'
 export * from './hooks/useMotionValueValue'
 export * from './hooks/useMotionSelector'
+export * from './hooks/useMotionRect'
+export * from './hooks/useStickyTop'
diff --git a/packages/framer-utils/package.json b/packages/framer-utils/package.json
index 448279ba58..3717d276e9 100644
--- a/packages/framer-utils/package.json
+++ b/packages/framer-utils/package.json
@@ -18,6 +18,8 @@
     "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.110",
     "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.110",
     "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.110",
+    "@mui/material": "^5.10.16",
+    "clsx": "^2.1.1",
     "framer-motion": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/packages/framer-utils/utils/numberToPx.ts b/packages/framer-utils/utils/numberToPx.ts
new file mode 100644
index 0000000000..b23efefd82
--- /dev/null
+++ b/packages/framer-utils/utils/numberToPx.ts
@@ -0,0 +1,3 @@
+import { px } from 'framer-motion'
+
+export const numberToPx = (value: number) => px.transform(Math.round(value * 100) / 100)
diff --git a/packages/magento-cart/components/CartFab/CartFab.tsx b/packages/magento-cart/components/CartFab/CartFab.tsx
index 2cb4e6f7e9..28637cfdc5 100644
--- a/packages/magento-cart/components/CartFab/CartFab.tsx
+++ b/packages/magento-cart/components/CartFab/CartFab.tsx
@@ -1,15 +1,15 @@
 import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import {
   DesktopHeaderBadge,
-  IconSvg,
   extendableComponent,
   iconShoppingBag,
+  IconSvg,
   useFabSize,
   useScrollY,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import type { BadgeProps, FabProps, SxProps, Theme } from '@mui/material'
-import { Box, Fab, alpha, styled, useTheme } from '@mui/material'
+import { alpha, Box, Fab, styled, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
diff --git a/packages/magento-category/components/CategoryChildren/CategoryChildren.tsx b/packages/magento-category/components/CategoryChildren/CategoryChildren.tsx
index 657139b5a7..49e68febce 100644
--- a/packages/magento-category/components/CategoryChildren/CategoryChildren.tsx
+++ b/packages/magento-category/components/CategoryChildren/CategoryChildren.tsx
@@ -32,13 +32,14 @@ export function CategoryChildren(props: CategoryChildrenProps) {
   )
 
   const hasNavigatableChildren = childItems.some((cat) => !cat.active)
+
   if (!hasNavigatableChildren) return null
 
   return (
     <ScrollerProvider scrollSnapAlign='none'>
       <Box
         className={classes.container}
-        sx={[{ display: 'flex' }, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={[{ display: 'grid' }, ...(Array.isArray(sx) ? sx : [sx])]}
       >
         <Scroller
           className={classes.scroller}
diff --git a/packages/magento-compare/plugins/AddCompareFabNextToCart.tsx b/packages/magento-compare/plugins/AddCompareFabNextToCart.tsx
index e9b9e40572..5523550e6b 100644
--- a/packages/magento-compare/plugins/AddCompareFabNextToCart.tsx
+++ b/packages/magento-compare/plugins/AddCompareFabNextToCart.tsx
@@ -13,7 +13,7 @@ export function CartFab(props: PluginProps<CartFabProps>) {
   return (
     <>
       <Prev {...rest} />
-      <CompareFab />
+      {/* <CompareFab /> */}
     </>
   )
 }
diff --git a/packages/next-ui/FramerScroller/SidebarGallery.tsx b/packages/next-ui/FramerScroller/SidebarGallery.tsx
index ca14954550..7ebd7694ea 100644
--- a/packages/next-ui/FramerScroller/SidebarGallery.tsx
+++ b/packages/next-ui/FramerScroller/SidebarGallery.tsx
@@ -9,10 +9,15 @@ import {
   ScrollerThumbnails,
   unstable_usePreventScroll as usePreventScroll,
 } from '@graphcommerce/framer-scroller'
-import { dvh } from '@graphcommerce/framer-utils'
+import {
+  dvh,
+  useMakeFullscreen,
+  useMotionRect,
+  useMotionValueValue,
+} from '@graphcommerce/framer-utils'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, Unstable_TrapFocus as TrapFocus, useTheme } from '@mui/material'
-import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { m, useDomEvent, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
@@ -138,10 +143,13 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const hasImages = images.length > 0
 
+  const measureRef = useRef<HTMLDivElement>(null)
+  const { margin } = useMakeFullscreen(measureRef, { debug: true, pause: zoomed })
+
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <Row
-        maxWidth={zoomed ? 'full' : 'lg'}
+        maxWidth='lg'
         disableGutters
         className={classes.row}
         breakoutLeft={variantMd === 'default' && !theme.appShell.containerSizingContent}
@@ -152,6 +160,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
       >
         <MotionBox
           layout
+          ref={measureRef}
           layoutDependency={zoomed}
           className={classes.root}
           sx={[
@@ -166,13 +175,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   } * 2)`,
                 },
               },
-
               '&.zoomed': {
                 position: 'relative',
                 zIndex: theme.zIndex.modal,
-                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+                margin,
                 [theme.breakpoints.up('md')]: {
-                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
                   gridTemplateColumns: '1fr auto',
                 },
                 px: 0,
@@ -201,7 +208,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                       height: `max(${dvh(90)}, 40vw)`,
                       '&.sticky': {
                         position: 'sticky',
-                        top: theme.appShell.headerHeightMd,
+                        // top: offsetTop,
                       },
                     },
                   },
diff --git a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
index 7af5648aca..06f01c381b 100644
--- a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
+++ b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
@@ -1,26 +1,27 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
-import { dvh } from '@graphcommerce/framer-utils'
-import { Box, SxProps, Theme } from '@mui/material'
+import { dvh, StickyBox } from '@graphcommerce/framer-utils'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useScroll, useTransform } from 'framer-motion'
-import { Container } from '../../Container/Container'
+import React from 'react'
+import { Container, useContainerSpacing } from '../../Container/Container'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
-import { useFabSize } from '../../Theme'
 
 export type LayoutDefaultProps = {
   className?: string
   beforeHeader?: React.ReactNode
   header: React.ReactNode
+  afterHeader?: React.ReactNode
   footer: React.ReactNode
   menuFab?: React.ReactNode
   cartFab?: React.ReactNode
   children?: React.ReactNode
   sx?: SxProps<Theme>
-} & OwnerState
-
-type OwnerState = {
   stickyHeader?: boolean
+  stickyBeforeHeader?: boolean
+  stickyAfterHeader?: boolean
 }
 
 const parts = [
@@ -28,37 +29,37 @@ const parts = [
   'fabs',
   'beforeHeader',
   'header',
+  'afterHeader',
   'children',
   'footer',
   'cartFab',
   'menuFab',
 ] as const
-const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
-  'LayoutDefault',
-  parts,
-)
+
+const { classes } = extendableComponent('LayoutDefault', parts)
 
 export function LayoutDefault(props: LayoutDefaultProps) {
   const {
     children,
     header,
     beforeHeader,
+    afterHeader,
     footer,
     menuFab,
     cartFab,
     stickyHeader = false,
+    stickyBeforeHeader = false,
+    stickyAfterHeader = false,
     className,
     sx = [],
   } = props
 
   const { scrollY } = useScroll()
-  const scrollYOffset = useTransform(
-    [scrollY, useScrollOffset()],
-    ([y, offset]: number[]) => y + offset,
-  )
+  const offset = useScrollOffset()
+  const scrollYOffset = useTransform(() => scrollY.get() + offset.get())
 
-  const classes = withState({ stickyHeader })
-  const fabIconSize = useFabSize('responsive')
+  // const fabIconSize = useFabSize('responsive')
+  const { padding } = useContainerSpacing({ sizing: 'shell', maxWidth: false })
 
   return (
     <Box
@@ -72,99 +73,100 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           display: 'grid',
           gridTemplate: `
             "beforeHeader" auto
-            "header" auto
             "fabs" auto
+            "header" auto
+            "afterHeader" auto
             "children" 1fr
             "footer" auto / 100%
           `,
           background: theme.palette.background.default,
-
-          // '&.stickyHeader .LayoutHeaderContent-content': {
-          //   [theme.breakpoints.up('md')]: {
-          //     pt: theme.spacings.sm,
-          //   },
-          // },
-          // '&.stickyHeader .CompareFab-root': {
-          //   [theme.breakpoints.up('md')]: {
-          //     mt: theme.spacings.sm,
-          //   },
-          // },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
-        {beforeHeader ? (
-          <Box sx={{ gridArea: 'beforeHeader' }} className={classes.beforeHeader}>
-            {beforeHeader}
-          </Box>
-        ) : null}
-        <Container
-          sizing='shell'
-          maxWidth={false}
+        <StickyBox
+          sx={(theme) => ({
+            gridArea: 'beforeHeader',
+            zIndex: theme.zIndex.appBar - 1,
+          })}
+          stickyConfig={{ sticky: stickyBeforeHeader, to: null, name: 'beforeHeader' }}
+          className={classes.beforeHeader}
+        >
+          {beforeHeader}
+        </StickyBox>
+
+        <StickyBox
           component='header'
+          stickyConfig={{ sticky: stickyHeader, to: 'beforeHeader', name: 'header' }}
           className={classes.header}
           sx={(theme) => ({
             gridArea: 'header',
-            zIndex: theme.zIndex.appBar - 1,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            height: theme.appShell.headerHeightSm,
+
+            px: padding,
             pointerEvents: 'none' as const,
+            '&.sticky': {
+              zIndex: theme.zIndex.appBar - 1,
+              '& > *': { zIndex: theme.zIndex.appBar },
+            },
             '& > *': {
               pointerEvents: 'all' as const,
-              zIndex: theme.zIndex.appBar,
             },
+            height: theme.appShell.headerHeightSm,
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.headerHeightMd,
-              top: 0,
               display: 'flex',
               justifyContent: 'left',
               width: '100%',
             },
-            '&.stickyHeader': {
-              [theme.breakpoints.up('md')]: {
-                position: 'sticky',
-                top: 0,
-              },
-            },
           })}
         >
           {header}
-        </Container>
-        {menuFab || cartFab ? (
-          <Container
-            sizing='shell'
-            maxWidth={false}
-            className={classes.fabs}
-            sx={(theme) => {
-              const negativeHeaderHeightMd = `(${theme.appShell.headerHeightMd} * -1)`
-              const topMd = `(${theme.appShell.headerHeightMd}  - ${fabIconSize}) / 2`
+        </StickyBox>
 
-              return {
-                gridArea: 'fabs',
-                display: 'flex',
-                justifyContent: 'space-between',
-                width: '100%',
-                height: 0,
-                zIndex: theme.zIndex.appBar,
-                [theme.breakpoints.up('md')]: {
-                  position: 'sticky',
-                  marginTop: `calc(${negativeHeaderHeightMd} + ${topMd})`,
-                  top: `calc(${topMd})`,
-                },
-                [theme.breakpoints.down('md')]: {
-                  position: 'fixed',
-                  bottom: `calc(20px + ${fabIconSize})`,
-                  padding: '0 20px',
-                  '@media (max-height: 530px) and (orientation: portrait)': {
-                    display: 'none',
-                  },
+        <StickyBox
+          stickyConfig={{ sticky: stickyAfterHeader, to: 'header', name: 'afterHeader' }}
+          sx={(theme) => ({
+            gridArea: 'afterHeader',
+            '&.sticky': {
+              zIndex: theme.zIndex.appBar - 1,
+            },
+          })}
+          className={classes.afterHeader}
+        >
+          {afterHeader}
+        </StickyBox>
+        {/* 
+        {(menuFab || cartFab) && (
+          <StickyBox
+            stickyConfig={{ sticky: true, to: 'header', name: 'fabs', position: 'center' }}
+            className={classes.fabs}
+            sx={(theme) => ({
+              px: padding,
+              gridArea: 'fabs',
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              height: 0,
+              zIndex: theme.zIndex.appBar,
+              [theme.breakpoints.up('md')]: {
+                position: 'sticky',
+                // marginTop: `calc(${negativeHeaderHeightMd} + ${topMd})`,
+                // top: `calc(${topMd})`,
+              },
+              [theme.breakpoints.down('md')]: {
+                position: 'fixed',
+                // bottom: `calc(20px + ${fabIconSize})`,
+                padding: '0 20px',
+                '@media (max-height: 530px) and (orientation: portrait)': {
+                  display: 'none',
                 },
-              }
-            }}
+              },
+            })}
           >
             <Box
               className={classes.menuFab}
@@ -176,45 +178,54 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               <Box
                 className={classes.cartFab}
                 sx={(theme) => {
-                  const topMd = `(${theme.appShell.headerHeightMd}  - ${fabIconSize}) / 2`
+                  // const topMd = `(${theme.appShell.headerHeightMd}  - ${fabIconSize}) / 2`
                   return {
-                    display: 'flex',
-                    flexDirection: 'row-reverse',
-
-                    [theme.breakpoints.down('md')]: {
-                      columnGap: theme.spacings.sm,
-                    },
-
-                    [theme.breakpoints.up('md')]: {
-                      rowGap: `calc(${topMd})`,
-                      '&.stickyHeader': {
-                        rowGap: `calc(${topMd} + ${theme.spacings.sm})`,
-                      },
-
-                      flexDirection: 'column',
-                      alignItems: 'flex-end',
-                    },
+                    // display: 'flex',
+                    // flexDirection: 'row-reverse',
+                    // [theme.breakpoints.down('md')]: {
+                    //   columnGap: theme.spacings.sm,
+                    // },
+                    // [theme.breakpoints.up('md')]: {
+                    //   // rowGap: `calc(${topMd})`,
+                    //   // '&.stickyHeader': {
+                    //   //   rowGap: `calc(${topMd} + ${theme.spacings.sm})`,
+                    //   // },
+                    //   flexDirection: 'column',
+                    //   alignItems: 'flex-end',
+                    // },
                   }
                 }}
               >
                 {cartFab}
               </Box>
             )}
-          </Container>
-        ) : (
-          <div />
-        )}
-        <Box
+          </StickyBox>
+        )} */}
+
+        <StickyBox
+          stickyConfig={{ sticky: true, to: 'header', name: 'fabs', position: 'center' }}
           sx={(theme) => ({
-            gridArea: 'children',
-            '&.stickyHeader': {
-              [theme.breakpoints.up('md')]: {
-                pt: theme.spacings.sm,
-              },
+            px: padding,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'space-between',
+            gridArea: 'fabs',
+            '& > *': {
+              zIndex: theme.zIndex.appBar,
+            },
+            height: theme.appShell.headerHeightSm,
+            marginBottom: `calc(${theme.appShell.headerHeightSm} * -1)`,
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.headerHeightMd,
+              marginBottom: `calc(${theme.appShell.headerHeightMd} * -1)`,
             },
           })}
-          className={classes.children}
         >
+          {menuFab}
+          {cartFab}
+        </StickyBox>
+
+        <Box sx={{ gridArea: 'children' }} className={classes.children}>
           <div id='skip-nav' tabIndex={-1} />
           {children}
         </Box>