@graphcommerce/next-ui 4.12.0 → 4.14.0

package/ActionCard/ActionCard.tsx

@@ -11,7 +11,7 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
   selected?: boolean
   hidden?: boolean
   value: string | number
@@ -66,7 +66,7 @@ export function ActionCard(props: ActionCardProps) {
 
   const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
 
-  const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase

package/ActionCard/ActionCardList.tsx

@@ -3,19 +3,20 @@ import { AnimatePresence } from 'framer-motion'
 import React from 'react'
 import { isFragment } from 'react-is'
 import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
+import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
   multiple: true
-  value: string[]
+  value: (string | number)[]
 
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string[]) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
   multiple?: false
-  value: string
+  value: string | number
 
   /** Value is null when deselected when not required */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: Select['value'] | null) => void
 }
 
 export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
@@ -29,94 +30,124 @@ function isMulti(props: ActionCardListProps): props is ActionCardListProps<Multi
   return props.multiple === true
 }
 
-function isValueSelected(value: string, candidate: string | string[]) {
-  if (candidate === undefined || value === undefined) return false
+function isValueSelected(
+  value: ActionCardProps['value'],
+  candidate?: Select['value'] | MultiSelect['value'],
+) {
+  if (candidate === undefined) return false
   if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
   return value === candidate
 }
 
-export function ActionCardList(props: ActionCardListProps) {
-  const { children, required, value, error = false, errorMessage } = props
+export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
+  (props, ref) => {
+    const { children, required, error = false, errorMessage } = props
 
-  const handleChange = isMulti(props)
-    ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
-        const index = Boolean(value) && value?.indexOf(buttonValue)
-        let newValue: string[]
+    const handleChange: ActionCardProps['onClick'] = isMulti(props)
+      ? (event, v) => {
+          const { onChange, value } = props
+          const index = Boolean(value) && value?.indexOf(v)
+          let newValue: typeof value
 
-        if (Array.isArray(value) && value.length && index && index >= 0) {
-          newValue = value.slice()
-          newValue.splice(index, 1)
-        } else {
-          newValue = value ? [...value, buttonValue] : [buttonValue]
+          if (value.length && index && index >= 0) {
+            newValue = value.slice()
+            newValue.splice(index, 1)
+          } else {
+            newValue = value ? [...value, v] : [v]
+          }
+          onChange?.(event, newValue)
         }
-        onChange?.(event, newValue)
-      }
-    : (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
+      : (event, v) => {
+          const { onChange, value } = props
 
-        if (value === buttonValue) return
-        if (required) onChange?.(event, buttonValue)
-        else onChange?.(event, value === buttonValue ? null : buttonValue)
-      }
+          if (value !== v) {
+            if (required) onChange?.(event, v)
+            else onChange?.(event, value === v ? null : v)
+          }
+        }
 
-  return (
-    <Box
-      sx={[
-        error &&
-          ((theme) => ({
-            '& .ActionCard-root': {
-              borderLeft: 2,
-              borderRight: 2,
-              borderLeftColor: 'error.main',
-              borderRightColor: 'error.main',
-              paddingLeft: theme.spacings.xs,
-              paddingRight: theme.spacings.xs,
-            },
-            '& > div:first-of-type.ActionCard-root': {
-              borderTop: 2,
-              borderTopColor: 'error.main',
-              paddingTop: theme.spacings.xxs,
-            },
-            '& > div:last-of-type.ActionCard-root': {
-              borderBottom: 2,
-              borderBottomColor: 'error.main',
-              paddingBottom: theme.spacings.xxs,
-            },
-          })),
-      ]}
+    type ActionCardLike = React.ReactElement<
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick'>
     >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return null
+    function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
+      const hasValue = (el as ActionCardLike).props.value
 
+      if (process.env.NODE_ENV !== 'production') {
+        if (!hasValue) console.error(el, `must be an instance of ActionCard`)
+      }
+      return (el as ActionCardLike).props.value !== undefined
+    }
+
+    // Make sure the children are cardlike
+    const childReactNodes = React.Children.toArray(children)
+      .filter(React.isValidElement)
+      .filter(isActionCardLike)
+      .filter((child) => {
         if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
+          if (isFragment(child))
             console.error(
               [
                 "@graphcommerce/next-ui: The ActionCardList component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
+                'Consider providing an array instead',
               ].join('\n'),
             )
-          }
         }
 
-        return React.cloneElement(child, {
-          onClick: handleChange,
-          selected:
-            child.props.selected === undefined
-              ? isValueSelected(child.props.value as string, value)
-              : child.props.selected,
-        })
-      })}
-      {error && (
-        <Alert
-          severity='error'
-          variant='filled'
-          sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
-        >
-          {errorMessage}
-        </Alert>
-      )}
-    </Box>
-  )
-}
+        return !isFragment(child)
+      })
+
+    // Make sure the selected values is in the list of all possible values
+    const value = childReactNodes.find(
+      // eslint-disable-next-line react/destructuring-assignment
+      (child) => child.props.value === props.value && child.props.disabled !== true,
+    )?.props.value
+
+    return (
+      <Box
+        ref={ref}
+        sx={[
+          error &&
+            ((theme) => ({
+              '& .ActionCard-root': {
+                borderLeft: 2,
+                borderRight: 2,
+                borderLeftColor: 'error.main',
+                borderRightColor: 'error.main',
+                paddingLeft: theme.spacings.xs,
+                paddingRight: theme.spacings.xs,
+              },
+              '& > div:first-of-type.ActionCard-root': {
+                borderTop: 2,
+                borderTopColor: 'error.main',
+                paddingTop: theme.spacings.xxs,
+              },
+              '& > div:last-of-type.ActionCard-root': {
+                borderBottom: 2,
+                borderBottomColor: 'error.main',
+                paddingBottom: theme.spacings.xxs,
+              },
+            })),
+        ]}
+      >
+        {childReactNodes.map((child) =>
+          React.cloneElement(child, {
+            onClick: handleChange,
+            selected:
+              child.props.selected === undefined
+                ? isValueSelected(child.props.value, value)
+                : child.props.selected,
+          }),
+        )}
+        {error && (
+          <Alert
+            severity='error'
+            variant='filled'
+            sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
+          >
+            {errorMessage}
+          </Alert>
+        )}
+      </Box>
+    )
+  },
+)

package/ActionCard/ActionCardListForm.tsx

@@ -34,10 +34,11 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       control={control}
       name={name}
       rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
-      render={({ field: { onChange, value }, fieldState, formState }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
+          ref={ref}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
           errorMessage={fieldState.error?.message}

package/Blog/BlogListItem/BlogListItem.tsx

@@ -20,7 +20,7 @@ const { classes } = extendableComponent(name, parts)
 export function BlogListItem(props: BlogListItemProps) {
   const { asset, url, date, title, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' })
+  const formatter = useDateTimeFormat({ dateStyle: 'long' })
 
   return (
     <Box

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 4.14.0
+
+### Minor Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50) Thanks [@NickdeK](https://github.com/NickdeK)! - Added a new cookies utility to load cookies on the frontend
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4) Thanks [@NickdeK](https://github.com/NickdeK)! - ActionCardList will now show all options when the selected value isn't in any of the options
+
+* [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df) Thanks [@NickdeK](https://github.com/NickdeK)! - Make sure the useDateTimeFormat isn't giving hydration warnings
+
+* Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.24
+
+## 4.13.1
+
+### Patch Changes
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce) Thanks [@paales](https://github.com/paales)! - Updated to Next.js v12.2.2 and other packages and made compatible
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794) Thanks [@paales](https://github.com/paales)! - Make sure the gallery doesn't scroll when overlays are opened
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea) Thanks [@paales](https://github.com/paales)! - Prevent back button scrolling when navigating between overlays
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43) Thanks [@paales](https://github.com/paales)! - Fix page stacking and scroll restoration when navigating
+
+* Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
+  - @graphcommerce/framer-next-pages@3.2.4
+  - @graphcommerce/framer-scroller@2.1.23
+
+## 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

package/FramerScroller/SidebarGallery.tsx

@@ -119,6 +119,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
+          layoutDependency={zoomed}
           className={classes.root}
           sx={[
             {
@@ -146,6 +147,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
         >
           <MotionBox
             layout
+            layoutDependency={zoomed}
             className={classes.scrollerContainer}
             sx={[
               {
@@ -193,6 +195,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 <MotionImageAspect
                   key={typeof image.src === 'string' ? image.src : idx}
                   layout
+                  layoutDependency={zoomed}
                   src={image.src}
                   width={image.width}
                   height={image.height}
@@ -209,6 +212,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             </Scroller>
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.topRight}
               sx={{
                 display: 'grid',
@@ -243,6 +247,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='left'
                 size='small'
                 className={classes.sliderButtons}
@@ -262,6 +267,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='right'
                 size='small'
                 className={classes.sliderButtons}
@@ -286,7 +292,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               }}
             >
-              <ScrollerDots layout sx={{ backgroundColor: 'background.paper', boxShadow: 6 }} />
+              <ScrollerDots
+                layout
+                layoutDependency={zoomed}
+                sx={{ backgroundColor: 'background.paper', boxShadow: 6 }}
+              />
             </Box>
           </MotionBox>
 
@@ -319,6 +329,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
           >
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.sidebar}
               sx={{
                 boxSizing: 'border-box',

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/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 { LayoutProps, 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
@@ -13,6 +16,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   switchPoint?: number
   sx?: SxProps<Theme>
   sxBg?: SxProps<Theme>
+  layout?: LayoutProps['layout']
 }
 
 type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
@@ -33,6 +37,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     switchPoint = 50,
     sx = [],
     sxBg = [],
+    layout,
   } = props
 
   const scroll = useScrollY()
@@ -139,7 +144,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            {left}
+            <MotionDiv layout={layout}>{left}</MotionDiv>
           </Box>
         )}
         <Box
@@ -172,7 +177,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          {children}
+          <MotionDiv layout={layout}>{children}</MotionDiv>
         </Box>
         <Box
           className={classes.right}
@@ -188,7 +193,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          {right}
+          <MotionDiv layout={layout}>{right}</MotionDiv>
         </Box>
         {divider && (
           <Box

package/LayoutDefault/components/LayoutDefault.tsx

@@ -39,8 +39,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     sx = [],
   } = props
 
-  const offset = useScrollOffset().y
-  const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
+  const scrollWithOffset = useTransform(
+    [useViewportScroll().scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
 
   const classes = withState({ noSticky })
 
@@ -104,7 +106,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,14 @@
+import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+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 +18,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 = useMotionValueValue(useScrollOffset(), (v) => v)
+  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>