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."