@graphcommerce/next-ui 4.11.1 → 4.13.0

package/ActionCard/ActionCard.tsx

@@ -82,7 +82,7 @@ export function ActionCard(props: ActionCardProps) {
           gridTemplateAreas: `
             "image title action"
             "image details ${price ? 'price' : 'details'}"
-            "image secondaryActio additionalDetails"
+            "image secondaryAction additionalDetails"
             "after after after"
           `,
           justifyContent: 'unset',

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 4.13.0
+
+### Minor Changes
+
+- [#1522](https://github.com/graphcommerce-org/graphcommerce/pull/1522) [`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introducing a new Navigation component that builds on the existing navigation component and tries to address the 'mega menu' question where there are tons of categories that need to be navigated quickly.
+
+* [#1522](https://github.com/graphcommerce-org/graphcommerce/pull/1522) [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introducting a new Overlay component with is the generic part of LayoutOverlay into OverlayBase. The new Overlay is used to render the new Navigation component.
+
+### Patch Changes
+
+- Updated dependencies [[`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
+  - @graphcommerce/framer-scroller@2.1.22
+
+## 4.12.0
+
+### Minor Changes
+
+- [#1534](https://github.com/graphcommerce-org/graphcommerce/pull/1534) [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Added the method title to the action card title for shipping methods.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.21
+
+## 4.11.2
+
+### Patch Changes
+
+- [#1538](https://github.com/graphcommerce-org/graphcommerce/pull/1538) [`fe4baa42d`](https://github.com/graphcommerce-org/graphcommerce/commit/fe4baa42db0081ed960d62aef688bd36a7ac974f) Thanks [@paales](https://github.com/paales)! - add missing translations
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.20
+
 ## 4.11.1
 
 ### Patch Changes

package/Layout/components/LayoutHeader.tsx

@@ -60,7 +60,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   let left = secondary
   let right = primary
 
-  if (back) left = back
+  if (back && !secondary) left = back
 
   if (!right) right = close
   else if (!left) left = close

package/Layout/components/LayoutHeaderBack.tsx

@@ -46,7 +46,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href
 
-  let label = i18n._(/* i18n */ `Back`)
+  let label = i18n._(/* i18n */ 'Back')
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,10 +1,13 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Box, SxProps, Theme } from '@mui/material'
+import { Box, styled, SxProps, Theme } from '@mui/material'
+import { m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { extendableComponent } from '../../Styles'
 import { useScrollY } from '../hooks/useScrollY'
 import { FloatingProps } from './LayoutHeadertypes'
 
+const MotionDiv = styled(m.div)({})
+
 export type LayoutHeaderContentProps = FloatingProps & {
   children?: React.ReactNode
   left?: React.ReactNode
@@ -139,7 +142,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            {left}
+            <MotionDiv layout='position'>{left}</MotionDiv>
           </Box>
         )}
         <Box
@@ -172,7 +175,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          {children}
+          <MotionDiv layout='position'>{children}</MotionDiv>
         </Box>
         <Box
           className={classes.right}
@@ -188,7 +191,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          {right}
+          <MotionDiv layout='position'>{right}</MotionDiv>
         </Box>
         {divider && (
           <Box

package/LayoutDefault/components/LayoutDefault.tsx

@@ -104,7 +104,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               justifyContent: 'space-between',
               width: '100%',
               height: 0,
-              zIndex: 'drawer',
+              zIndex: 'speedDial',
               [theme.breakpoints.up('sm')]: {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,10 +1,13 @@
+import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
-import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
+import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
 
-export type { LayoutOverlayVariant } from './LayoutOverlayBase'
-
-export type LayoutOverlayProps = SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>
+export type LayoutOverlayProps = Omit<
+  SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
+  'active' | 'direction' | 'onClosed' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+>
 
 export function LayoutOverlay(props: LayoutOverlayProps) {
   const { children, variantSm = 'bottom', variantMd = 'right', ...otherProps } = props
@@ -14,11 +17,26 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
   const scrollSnapTypeMd: ScrollSnapType =
     variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
 
+  const { closeSteps, active, direction } = usePageContext()
+  const onCloseHandler = useGo(closeSteps * -1)
+  const offsetPageY = useScrollOffset().y
+  const [isPresent, safeToRemove] = usePresence()
+
   return (
     <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
-      <LayoutOverlayBase variantMd={variantMd} variantSm={variantSm} {...otherProps}>
+      <OverlayBase
+        active={active}
+        direction={direction}
+        onClosed={onCloseHandler}
+        offsetPageY={offsetPageY}
+        variantMd={variantMd}
+        variantSm={variantSm}
+        isPresent={isPresent}
+        safeToRemove={safeToRemove}
+        {...otherProps}
+      >
         {children}
-      </LayoutOverlayBase>
+      </OverlayBase>
     </ScrollerProvider>
   )
 }

package/LayoutParts/DesktopNavBar.tsx

@@ -43,7 +43,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           sx={(theme) => ({
             gridArea: `1 / 1 / 1 / 4`,
             columnGap: theme.spacings.md,
-            padding: `0 ${theme.spacings.sm}`,
+            padding: `0 ${theme.spacings.md}`,
             gridAutoColumns: 'min-content',
           })}
           className={classes.scroller}

package/LayoutParts/DesktopNavBarItem.tsx

@@ -5,11 +5,45 @@ import { extendableComponent } from '../Styles/extendableComponent'
 
 const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
 
-export type DesktopNavItemProps = LinkProps & Pick<PageLinkProps, 'href'>
+export type DesktopNavItemLinkProps = LinkProps<'a'> & Pick<PageLinkProps, 'href'>
+export type DesktopNavItemButtonProps = LinkProps<'div'> & {
+  onClick: LinkProps<'button'>['onClick']
+}
+
+function isLinkProps(
+  props: DesktopNavItemLinkProps | DesktopNavItemButtonProps,
+): props is DesktopNavItemLinkProps {
+  return 'href' in props
+}
+
+export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemButtonProps) {
+  const router = useRouter()
+
+  if (!isLinkProps(props)) {
+    const { onClick, children, sx = [], ...linkProps } = props
+
+    return (
+      <Link
+        className={classes.root}
+        component='div'
+        variant='h6'
+        color='text.primary'
+        underline='none'
+        {...linkProps}
+        onClick={onClick}
+        sx={[
+          { whiteSpace: 'nowrap', paddingTop: '6px', cursor: 'pointer' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
+      </Link>
+    )
+  }
 
-export function DesktopNavItem(props: DesktopNavItemProps) {
   const { href, children, sx = [], ...linkProps } = props
-  const active = useRouter().asPath.startsWith(href.toString())
+
+  const active = router.asPath.startsWith(href.toString())
 
   return (
     <PageLink href={href} passHref>
@@ -21,7 +55,7 @@ export function DesktopNavItem(props: DesktopNavItemProps) {
         {...linkProps}
         sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
       >
-        {children}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
         <Box
           component='span'
           className={classes.line}

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,6 +1,6 @@
 import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import router from 'next/router'
+import { useRouter } from 'next/router'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 
@@ -17,6 +17,7 @@ const { classes } = extendableComponent(compName, parts)
 
 export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
   const { href, children, icon, sx = [] } = props
+  const router = useRouter()
 
   return (
     <PageLink href={href} passHref>

package/Navigation/components/NavigationFab.tsx

@@ -0,0 +1,106 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Fab, styled, Box, SxProps, Theme, FabProps } from '@mui/material'
+import { m } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { IconSvg } from '../../IconSvg'
+import { useScrollY } from '../../Layout/hooks/useScrollY'
+import { useFabAnimation } from '../../LayoutParts/useFabAnimation'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { useFabSize } from '../../Theme'
+import { iconMenu, iconClose } from '../../icons'
+
+const MotionDiv = styled(m.div)({})
+
+export type NavigationFabProps = {
+  menuIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
+
+const name = 'MenuFab'
+const parts = ['wrapper', 'fab', 'shadow', 'menu'] as const
+type OwnerState = {
+  scrolled: boolean
+}
+
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function NavigationFab(props: NavigationFabProps) {
+  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const router = useRouter()
+  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
+
+  const { opacity, shadowOpacity } = useFabAnimation()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
+
+  useEffect(() => {
+    const clear = () => setOpenEl(null)
+    router.events.on('routeChangeStart', clear)
+    return () => router.events.off('routeChangeStart', clear)
+  }, [router.events])
+
+  const fabIconSize = useFabSize('responsive')
+
+  const classes = withState({ scrolled })
+
+  return (
+    <Box
+      sx={[
+        { position: 'relative', width: fabIconSize, height: fabIconSize },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <MotionDiv
+        className={classes.wrapper}
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+            transform: 'none !important',
+          },
+        })}
+        style={{ opacity }}
+      >
+        <Fab
+          color='inherit'
+          aria-label='Open Menu'
+          size='responsive'
+          sx={(theme) => ({
+            boxShadow: 'none',
+            '&:hover, &:focus': {
+              boxShadow: 'none',
+              background: theme.palette.text.primary,
+            },
+            background: theme.palette.text.primary,
+            pointerEvents: 'all',
+            color: theme.palette.background.paper,
+          })}
+          className={classes.fab}
+          {...fabProps}
+        >
+          {closeIcon ?? (
+            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+          )}
+          {menuIcon ?? (
+            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+          )}
+        </Fab>
+        <MotionDiv
+          sx={(theme) => ({
+            pointerEvents: 'none',
+            borderRadius: '99em',
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            boxShadow: theme.shadows[6],
+            top: 0,
+            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+          })}
+          className={classes.shadow}
+          style={{ opacity: shadowOpacity }}
+        />
+      </MotionDiv>
+    </Box>
+  )
+}

package/Navigation/components/NavigationItem.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import PageLink from 'next/link'
+import { IconSvg } from '../../IconSvg'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { iconChevronRight } from '../../icons'
+import {
+  isNavigationButton,
+  isNavigationComponent,
+  isNavigationHref,
+  NavigationNode,
+  NavigationPath,
+  useNavigation,
+} from '../hooks/useNavigation'
+import type { NavigationList } from './NavigationList'
+
+type OwnerState = {
+  first?: boolean
+  last?: boolean
+  // It is actually used.
+  // eslint-disable-next-line react/no-unused-prop-types
+  column: number
+}
+
+type NavigationItemProps = NavigationNode & {
+  parentPath: NavigationPath
+  idx: number
+  NavigationList: typeof NavigationList
+} & OwnerState
+
+const componentName = 'NavigationItem'
+const parts = ['li', 'ul', 'item'] as const
+
+const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
+
+const NavigationLI = styled('li')({ display: 'contents' })
+
+export function NavigationItem(props: NavigationItemProps) {
+  const { id, parentPath, idx, first, last, NavigationList } = props
+
+  const row = idx + 1
+  const { selected, select, hideRootOnNavigate, onClose } = useNavigation()
+
+  const itemPath = [...parentPath, id]
+  const isSelected = selected.slice(0, itemPath.length).join('/') === itemPath.join('/')
+
+  const hidingRoot = hideRootOnNavigate && selected.length > 0
+  const hideItem = hidingRoot && itemPath.length === 1
+
+  const column = hidingRoot ? itemPath.length - 1 : itemPath.length
+  const classes = withState({ first, last, column: itemPath.length })
+
+  const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback((e) => {
+    if (!isNavigationHref(props)) return
+    const { href } = props
+    onClose?.(e, href)
+  })
+
+  if (isNavigationButton(props)) {
+    const { childItems, name } = props
+    return (
+      <NavigationLI className={classes.li}>
+        <ListItemButton
+          className={classes.item}
+          role='button'
+          sx={{
+            gridRowStart: row,
+            gridColumnStart: column,
+            gap: (theme) => theme.spacings.xxs,
+            display: hideItem ? 'none' : 'flex',
+          }}
+          disabled={isSelected}
+          tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+          onClick={(e) => {
+            e.preventDefault()
+            if (!isSelected) select(itemPath)
+          }}
+        >
+          <Box
+            component='span'
+            sx={{
+              whiteSpace: 'nowrap',
+              overflowX: 'hidden',
+              textOverflow: 'ellipsis',
+              flexGrow: 1,
+            }}
+          >
+            {name}
+          </Box>
+          <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
+        </ListItemButton>
+
+        <NavigationList items={childItems} selected={isSelected} parentPath={itemPath} />
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationHref(props)) {
+    const { name, href } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <PageLink href={href} passHref>
+          <ListItemButton
+            className={classes.item}
+            component='a'
+            sx={(theme) => ({
+              gridRowStart: row,
+              gridColumnStart: column,
+              gap: theme.spacings.xxs,
+            })}
+            tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+            onClick={onCloseHandler}
+          >
+            <Box
+              component='span'
+              sx={{
+                whiteSpace: 'nowrap',
+                overflowX: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {name}
+            </Box>
+          </ListItemButton>
+        </PageLink>
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationComponent(props)) {
+    const { component } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <Box sx={{ gridRowStart: row, gridColumnStart: column }} className={classes.item}>
+          {component}
+        </Box>
+      </NavigationLI>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
+
+  return null
+}

package/Navigation/components/NavigationList.tsx

@@ -0,0 +1,50 @@
+import { styled } from '@mui/material'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
+import { NavigationItem } from './NavigationItem'
+
+const NavigationUList = styled('ul')({})
+
+type NavigationItemsProps = {
+  parentPath?: NavigationPath
+  items: NavigationNode[]
+  selected?: boolean
+}
+
+type OwnerState = {
+  column: number
+}
+
+const name = 'NavigationList'
+const parts = ['root'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+// const componentName = 'NavigationItem'
+// const parts = ['li', 'ul', 'item'] as const
+
+export function NavigationList(props: NavigationItemsProps) {
+  const { items, parentPath = [], selected = false } = props
+
+  return (
+    <NavigationUList
+      sx={[
+        { display: 'block', position: 'absolute', left: '-10000px', top: '-10000px' },
+        selected && { display: 'contents' },
+      ]}
+      className={withState({ column: 0 }).root}
+    >
+      {items.map((item, idx) => (
+        <NavigationItem
+          NavigationList={NavigationList}
+          key={item.id}
+          {...item}
+          parentPath={parentPath}
+          idx={idx}
+          first={idx === 0}
+          last={idx === items.length - 1}
+          column={0}
+        />
+      ))}
+    </NavigationUList>
+  )
+}

package/Navigation/components/NavigationOverlay.tsx

@@ -0,0 +1,236 @@
+import styled from '@emotion/styled'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
+import { m } from 'framer-motion'
+import { IconSvg, useIconSvgSize } from '../../IconSvg'
+import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
+import { LayoutTitle } from '../../Layout/components/LayoutTitle'
+import { Overlay } from '../../Overlay/components/Overlay'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { useFabSize } from '../../Theme'
+import { iconClose, iconChevronLeft } from '../../icons'
+import {
+  isNavigationButton,
+  isNavigationComponent,
+  NavigationContextType,
+  NavigationNodeButton,
+  NavigationNodeHref,
+  useNavigation,
+} from '../hooks/useNavigation'
+import { NavigationList } from './NavigationList'
+
+type NavigationOverlayProps = {
+  active: boolean
+  sx?: SxProps<Theme>
+  stretchColumns?: boolean
+  itemWidth: string
+}
+
+function findCurrent(
+  items: NavigationContextType['items'],
+  selected: NavigationContextType['selected'],
+): NavigationNodeHref | NavigationNodeButton | undefined {
+  const lastItem = selected.slice(-1)[0]
+
+  if (!lastItem) return undefined
+
+  for (const item of items) {
+    // eslint-disable-next-line no-continue
+    if (isNavigationComponent(item)) continue
+
+    // If the item is the current one, return it
+    if (item.id === lastItem) return item
+
+    // Recursively find item
+    if (isNavigationButton(item)) return findCurrent(item.childItems, selected)
+  }
+  return undefined
+}
+
+const MotionDiv = styled(m.div)()
+
+const componentName = 'Navigation'
+const parts = ['root', 'navigation', 'header', 'column'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function NavigationOverlay(props: NavigationOverlayProps) {
+  const { active, sx, stretchColumns, itemWidth } = props
+  const { selected, select, items, onClose } = useNavigation()
+
+  const fabSize = useFabSize('responsive')
+  const svgSize = useIconSvgSize('large')
+
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
+  const handleOnBack = useEventCallback(() => {
+    if (isMobile) select(selected.slice(0, -1))
+    else select([])
+  })
+
+  const showBack = selected.length > 0
+
+  return (
+    <Overlay
+      className={classes.root}
+      active={active}
+      onClosed={onClose}
+      variantSm='left'
+      sizeSm='floating'
+      justifySm='start'
+      variantMd='left'
+      sizeMd='floating'
+      justifyMd='start'
+      sx={{
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          minWidth: 'auto !important',
+          width: 'max-content',
+          overflow: 'hidden',
+          display: 'grid',
+          gridTemplateRows: 'auto 1fr',
+        },
+      }}
+    >
+      <MotionDiv layout style={{ display: 'grid' }}>
+        <Box
+          className={classes.header}
+          sx={(theme) => ({
+            top: 0,
+            position: 'sticky',
+            height: { xs: theme.appShell.headerHeightSm, md: theme.appShell.appBarHeightMd },
+            zIndex: 1,
+          })}
+        >
+          <LayoutHeaderContent
+            floatingMd={false}
+            floatingSm={false}
+            switchPoint={0}
+            left={
+              showBack && (
+                <Fab
+                  color='inherit'
+                  onClick={handleOnBack}
+                  sx={{
+                    boxShadow: 'none',
+                    marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                    marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                  }}
+                  size='responsive'
+                  aria-label={i18n._(/* i18n */ 'Back')}
+                >
+                  <IconSvg src={iconChevronLeft} size='large' aria-hidden />
+                </Fab>
+              )
+            }
+            right={
+              <Fab
+                color='inherit'
+                onClick={() => onClose()}
+                sx={{
+                  boxShadow: 'none',
+                  marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                  marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                }}
+                size='responsive'
+                aria-label={i18n._(/* i18n */ 'Close')}
+              >
+                <IconSvg src={iconClose} size='large' aria-hidden />
+              </Fab>
+            }
+          >
+            <LayoutTitle size='small' component='span'>
+              {findCurrent(items, selected)?.name ?? <Trans id='Menu' />}
+            </LayoutTitle>
+          </LayoutHeaderContent>
+        </Box>
+      </MotionDiv>
+
+      <MotionDiv layout='position' style={{ display: 'grid' }}>
+        <Box
+          sx={(theme) => ({
+            display: 'grid',
+            alignItems: !stretchColumns ? 'start' : undefined,
+
+            [theme.breakpoints.down('md')]: {
+              overflow: 'hidden',
+              scrollSnapType: 'x mandatory',
+              width: `calc(${theme.spacings.md} + ${theme.spacings.md} + ${itemWidth})`,
+            },
+            '& .NavigationItem-item': {
+              width: itemWidth,
+            },
+          })}
+        >
+          <Box
+            className={classes.navigation}
+            sx={[
+              (theme) => ({
+                py: theme.spacings.md,
+                display: 'grid',
+                gridAutoFlow: 'column',
+                scrollSnapAlign: 'end',
+                '& > ul > li > a, & > ul > li > [role=button]': {
+                  '& span': {
+                    typography: 'h2',
+                  },
+                  // '& svg': { display: 'none' },
+                },
+                '& .Navigation-column': {},
+                '& .NavigationItem-item': {
+                  mx: theme.spacings.md,
+                  whiteSpace: 'nowrap',
+                },
+                '& .NavigationItem-item.first': {
+                  // mt: theme.spacings.md,
+                },
+                '& .Navigation-column:first-of-type': {
+                  boxShadow: 'none',
+                },
+              }),
+              ...(Array.isArray(sx) ? sx : [sx]),
+            ]}
+          >
+            {selected.length >= 0 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 1 / 999 / 2',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 1 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 2 / 999 / 3',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 2 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 3 / 999 / 4',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 3 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 4 / 999 / 5',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+
+            <NavigationList items={items} selected />
+          </Box>
+        </Box>
+      </MotionDiv>
+    </Overlay>
+  )
+}

package/Navigation/components/NavigationProvider.tsx

@@ -0,0 +1,66 @@
+import { useEventCallback } from '@mui/material'
+import { MotionConfig } from 'framer-motion'
+import { useState, useMemo } from 'react'
+import { isElement } from 'react-is'
+import {
+  NavigationNode,
+  NavigationPath,
+  NavigationContextType,
+  NavigationContext,
+  NavigationSelect,
+} from '../hooks/useNavigation'
+
+export type NavigationProviderProps = {
+  items: (NavigationNode | React.ReactElement)[]
+  hideRootOnNavigate?: boolean
+  closeAfterNavigate?: boolean
+  children?: React.ReactNode
+  animationDuration?: number
+  onChange?: NavigationSelect
+  onClose?: NavigationContextType['onClose']
+}
+
+const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
+
+export function NavigationProvider(props: NavigationProviderProps) {
+  const {
+    items,
+    onChange,
+    hideRootOnNavigate = true,
+    closeAfterNavigate = false,
+    animationDuration = 0.275,
+    children,
+    onClose: onCloseUnstable,
+  } = props
+
+  const [selected, setSelected] = useState<NavigationPath>([])
+
+  const select = useEventCallback((incomming: NavigationPath) => {
+    setSelected(incomming)
+    onChange?.(incomming)
+  })
+
+  const onClose: NavigationContextType['onClose'] = useEventCallback((e, href) => {
+    onCloseUnstable?.(e, href)
+    setTimeout(() => select([]), animationDuration * 1000)
+  })
+
+  const value = useMemo<NavigationContextType>(
+    () => ({
+      hideRootOnNavigate,
+      selected,
+      select,
+      items: items
+        .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
+        .filter(nonNullable),
+      onClose,
+    }),
+    [hideRootOnNavigate, selected, select, items, onClose],
+  )
+
+  return (
+    <MotionConfig transition={{ duration: animationDuration }}>
+      <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>
+    </MotionConfig>
+  )
+}

package/Navigation/hooks/useNavigation.ts

@@ -0,0 +1,58 @@
+import { createContext, useContext } from 'react'
+
+export type NavigationId = string | number
+export type NavigationPath = NavigationId[]
+export type NavigationSelect = (selected: NavigationPath) => void
+export type NavigationRender = React.FC<
+  (NavigationNodeComponent | NavigationNodeHref) & { children?: React.ReactNode }
+>
+
+export type NavigationOnClose = (
+  event?: React.MouseEvent<HTMLAnchorElement>,
+  href?: string | undefined,
+) => void
+export type NavigationContextType = {
+  selected: NavigationPath
+  select: NavigationSelect
+  items: NavigationNode[]
+  hideRootOnNavigate: boolean
+  onClose: NavigationOnClose
+}
+
+type NavigationNodeBase = {
+  id: NavigationId
+}
+
+export type NavigationNodeHref = NavigationNodeBase & {
+  name: string
+  href: string
+}
+
+export type NavigationNodeButton = NavigationNodeBase & {
+  name: string
+  childItems: NavigationNode[]
+}
+
+export type NavigationNodeComponent = NavigationNodeBase & {
+  component: React.ReactNode
+}
+
+export type NavigationNode = NavigationNodeHref | NavigationNodeButton | NavigationNodeComponent
+
+export function isNavigationHref(node: NavigationNodeBase): node is NavigationNodeHref {
+  return 'href' in node
+}
+
+export function isNavigationButton(node: NavigationNodeBase): node is NavigationNodeButton {
+  return (node as NavigationNodeButton).childItems?.length > 0
+}
+
+export function isNavigationComponent(node: NavigationNodeBase): node is NavigationNodeComponent {
+  return 'component' in node
+}
+
+export const NavigationContext = createContext(undefined as unknown as NavigationContextType)
+
+export function useNavigation() {
+  return useContext(NavigationContext)
+}

package/Navigation/index.ts

@@ -0,0 +1,4 @@
+export * from './components/NavigationOverlay'
+export * from './components/NavigationFab'
+export * from './hooks/useNavigation'
+export * from './components/NavigationProvider'

package/Overlay/components/Overlay.tsx

@@ -0,0 +1,61 @@
+import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+import type { SetOptional } from 'type-fest'
+import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+
+export type OverlayProps = Omit<
+  SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
+  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+>
+
+export function Overlay(props: OverlayProps) {
+  const { children, variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+
+  const scrollSnapTypeSm: ScrollSnapType =
+    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
+  const scrollSnapTypeMd: ScrollSnapType =
+    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
+
+  // todo: The overlay is always present in the DOM and the initial scroll position is set to 0.
+  //       This means in this case that the overlay is visisble. LayoutOverlayBase sets the scroll position to 320 with JS.
+  //       This would cause the overlay to be visisble for a moment before the scroll position is set.
+  //       The solution is to set the the first scroll-snap-align and scroll-snap-stop to the open position of the overlay.
+  //       However: We have control of the LayoutOverlayBase, we do not have control of all the child components so that solution will not work..
+  const [loaded, setLoaded] = useState(false)
+  useEffect(() => setLoaded(true), [])
+
+  return (
+    <Box
+      className='Overlay'
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        transform: loaded ? undefined : 'translateX(-200vw)',
+        pointerEvents: active ? undefined : 'none',
+        right: 0,
+        bottom: 0,
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          boxShadow: active ? undefined : 0,
+        },
+      }}
+    >
+      <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+        <OverlayBase
+          offsetPageY={0}
+          variantMd={variantMd}
+          variantSm={variantSm}
+          direction={1}
+          active={active}
+          isPresent={active}
+          safeToRemove={undefined}
+          {...otherProps}
+        >
+          {children}
+        </OverlayBase>
+      </ScrollerProvider>
+    </Box>
+  )
+}

package/{LayoutOverlay/components/LayoutOverlayBase.tsx → Overlay/components/OverlayBase.tsx}

@@ -1,4 +1,3 @@
-import { useGo, usePageContext, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   clientSizeCssVar,
@@ -6,7 +5,7 @@ import {
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
+import { m, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -35,6 +34,12 @@ export type LayoutOverlayBaseProps = {
   className?: string
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
+  active: boolean
+  direction: 1 | -1
+  onClosed: () => void
+  offsetPageY: number
+  isPresent: boolean
+  safeToRemove: (() => void) | null | undefined
 } & StyleProps &
   OverridableProps
 
@@ -61,7 +66,7 @@ const clearScrollLock = () => {
   document.body.style.overflow = ''
 }
 
-export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
+export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const props = useThemeProps({ name, props: incommingProps })
 
   const {
@@ -75,6 +80,12 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     justifyMd = 'stretch',
     sx = [],
     sxBackdrop = [],
+    active,
+    onClosed,
+    direction,
+    offsetPageY,
+    isPresent,
+    safeToRemove,
   } = props
 
   const th = useTheme()
@@ -88,12 +99,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const { scrollerRef, snap } = useScrollerContext()
   const positions = useOverlayPosition()
   const scrollTo = useScrollTo()
-  const [isPresent, safeToRemove] = usePresence()
   const beforeRef = useRef<HTMLDivElement>(null)
 
-  const { closeSteps, active, direction } = usePageContext()
-  const close = useGo(closeSteps * -1)
-
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
   const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
@@ -105,7 +112,15 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
-    if (!scroller || !isPresent) return undefined
+
+    if (!scroller) return undefined
+
+    if (!isPresent && position.get() === OverlayPosition.UNOPENED) {
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+    }
+
+    if (!isPresent) return undefined
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
@@ -148,7 +163,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
-    if (isPresent) return
+    if (isPresent || position.get() === OverlayPosition.UNOPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
 
@@ -164,8 +179,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
-    close()
-  }, [close, position])
+    onClosed()
+  }, [onClosed, position])
 
   // Handle escape key
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
@@ -187,7 +202,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   }, [offsetY])
 
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
-  const offsetPageY = useScrollOffset().y
   const scrollWithoffset = useTransform(
     [scroll.y, positions.open.y, offsetY],
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
@@ -333,7 +347,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 marginTop: `calc(${smSpacingTop} * -1)`,
                 paddingTop: smSpacingTop,
               },
-
               '&.sizeSmFloating': {
                 padding: `${theme.page.vertical} ${theme.page.horizontal}`,
               },
@@ -353,7 +366,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             },
           })}
         >
-          <Box
+          <MotionDiv
+            layout
             className={classes.overlayPane}
             sx={(theme) => ({
               pointerEvents: 'all',
@@ -419,7 +433,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             })}
           >
             <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </Box>
+          </MotionDiv>
         </Box>
       </Scroller>
     </>

package/Overlay/components/index.ts

@@ -0,0 +1,2 @@
+export * from './OverlayBase'
+export * from './Overlay'

package/Overlay/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/Theme/DarkLightModeThemeProvider.tsx

@@ -108,11 +108,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
-        {currentMode === 'light' ? (
-          <Trans id='Switch to Dark Mode' />
-        ) : (
-          <Trans id='Switch to Light Mode' />
-        )}
+        {currentMode === 'light' ? <Trans id='Dark Mode' /> : <Trans id='Light Mode' />}
       </ListItemText>
     </ListItemButton>
   )

package/index.ts

@@ -1,5 +1,5 @@
-export * from './ActionCard/ActionCardList'
 export * from './ActionCard/ActionCard'
+export * from './ActionCard/ActionCardList'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
@@ -22,6 +22,7 @@ export * from './Form/InputCheckmark'
 export * from './FramerScroller'
 export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
+export * from './hooks'
 export * from './IconHeader/IconHeader'
 export * from './icons'
 export * from './IconSvg'
@@ -30,6 +31,8 @@ export * from './Layout'
 export * from './LayoutDefault'
 export * from './LayoutOverlay'
 export * from './LayoutParts'
+export * from './Navigation'
+export * from './Overlay'
 export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
 export * from './PageMeta/PageMeta'
@@ -39,8 +42,8 @@ export * from './Row'
 export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'
 export * from './Separator/Separator'
-export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/ErrorSnackbar'
+export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField/StarRatingField'
 export * from './Stepper/Stepper'
@@ -50,6 +53,5 @@ export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
-export * from './hooks'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.11.1",
+  "version": "4.13.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.19",
+    "@graphcommerce/framer-scroller": "2.1.22",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
     "react-is": "^18.1.0",