scroll issue

components/core/Layout/Layout.tsx

@@ -8,7 +8,7 @@ import Button from '@components/ui/Button'
 import { CartSidebarView } from '@components/cart'
 import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
-
+import { usePreventScroll } from '@react-aria/overlays'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -16,10 +16,11 @@ interface Props {
 }
 
 const Layout: FC<Props> = ({ children, pageProps }) => {
-  const { displaySidebar, closeSidebar } = useUI()
+  const { displaySidebar, displayDropdown, closeSidebar } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
 
+  // TODO: Update code, add throttle and more.
   useEffect(() => {
     const offset = 0
     function handleScroll() {
@@ -34,6 +35,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     }
   }, [])
 
+  console.log(displaySidebar, displayDropdown)
+  usePreventScroll({
+    isDisabled: !displaySidebar,
+  })
+
   return (
     <CommerceProvider locale="en-us">
       <div className={cn(s.root)}>
@@ -49,9 +55,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-        <Sidebar show={displaySidebar} close={closeSidebar}>
+
+        <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."

components/core/UserNav/DropdownMenu.tsx

@@ -5,24 +5,14 @@ import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
 import { Menu, Transition } from '@headlessui/react'
-import { usePreventScroll } from '@react-aria/overlays'
+
 interface DropdownMenuProps {
-  onClose: () => void
   open: boolean
 }
 
-const DropdownMenu: FC<DropdownMenuProps> = ({
-  onClose,
-  children,
-  open = false,
-  ...props
-}) => {
+const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
 
-  usePreventScroll({
-    isDisabled: !open,
-  })
-
   return (
     <Transition
       show={open}

components/core/UserNav/UserNav.tsx

@@ -19,14 +19,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
-  const {
-    openSidebar,
-    closeSidebar,
-    displaySidebar,
-    displayDropdown,
-    openDropdown,
-    closeDropdown,
-  } = useUI()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
 
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
@@ -53,14 +46,16 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </Link>
           <li className={s.item}>
             <Menu>
-              {({ open }) => (
-                <>
-                  <Menu.Button className="inline-flex justify-center rounded-full">
-                    <Avatar />
-                  </Menu.Button>
-                  <DropdownMenu onClose={closeDropdown} open={open} />
-                </>
-              )}
+              {({ open }) => {
+                return (
+                  <>
+                    <Menu.Button className="inline-flex justify-center rounded-full">
+                      <Avatar />
+                    </Menu.Button>
+                    <DropdownMenu open={open} />
+                  </>
+                )
+              }}
             </Menu>
           </li>
         </ul>

components/ui/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
+import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
@@ -25,10 +25,6 @@ const Modal: FC<Props> = ({
   let { overlayProps } = useOverlay(props, ref)
   let { dialogProps } = useDialog(props, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
     <div className={rootClassName}>
       <FocusScope contain restoreFocus autoFocus>

components/ui/Sidebar/Sidebar.tsx

@@ -2,43 +2,33 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayContainer,
-} from '@react-aria/overlays'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
+const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
   const rootClassName = cn(s.root, className)
-
   const ref = useRef<HTMLDivElement>(null)
   const { modalProps } = useModal()
   const { overlayProps } = useOverlay(
     {
-      isOpen: show,
-      onClose: close,
+      isOpen: open,
       isDismissable: true,
+      onClose: onClose,
     },
     ref
   )
   const { dialogProps } = useDialog({}, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
-    <Transition show={show}>
+    <Transition show={open}>
       <OverlayContainer>
         <FocusScope contain restoreFocus autoFocus>
           <div className={rootClassName}>
@@ -54,7 +44,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                 <div
                   className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
                   // Close the sidebar when clicking on the backdrop
-                  onClick={close}
+                  onClick={onClose}
                 />
               </Transition.Child>
               <section

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^0.2.0",
+    "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
     "animate.css": "^4.1.1",
     "bowser": "^2.11.0",