Removing Portal, since it's not needed. We might add it later I'd rather not to.

components/common/Layout/Layout.tsx

@@ -76,18 +76,22 @@ const Layout: FC<Props> = ({
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
 
-        <Modal open={displayModal} onClose={closeModal}>
+        {displayModal && (
-          {modalView === 'LOGIN_VIEW' && <LoginView />}
+          <Modal onClose={closeModal}>
-          {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+            {modalView === 'LOGIN_VIEW' && <LoginView />}
-          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
+            {modalView === 'SIGNUP_VIEW' && <SignUpView />}
-        </Modal>
+            {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
+          </Modal>
+        )}
 
-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
+        {displaySidebar && (
-          {sidebarView === 'CART_VIEW' && <CartSidebarView />}
+          <Sidebar onClose={closeSidebar}>
-          {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
+            {sidebarView === 'CART_VIEW' && <CartSidebarView />}
-          {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
+            {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
-          {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+            {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
-        </Sidebar>
+            {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+          </Sidebar>
+        )}
 
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."

components/ui/Modal/Modal.tsx

@@ -1,22 +1,16 @@
 import { FC, useRef, useEffect, useCallback } from 'react'
-import Portal from '@reach/portal'
 import s from './Modal.module.css'
-import { Cross } from '@components/icons'
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
 import FocusTrap from '@lib/focus-trap'
+import { Cross } from '@components/icons'
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 interface ModalProps {
   className?: string
   children?: any
-  open?: boolean
   onClose: () => void
   onEnter?: () => void | null
 }
 
-const Modal: FC<ModalProps> = ({ children, open, onClose, onEnter = null }) => {
+const Modal: FC<ModalProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   const handleKey = useCallback(
@@ -30,12 +24,8 @@ const Modal: FC<ModalProps> = ({ children, open, onClose, onEnter = null }) => {
 
   useEffect(() => {
     if (ref.current) {
-      if (open) {
+      disableBodyScroll(ref.current)
-        disableBodyScroll(ref.current)
+      window.addEventListener('keydown', handleKey)
-        window.addEventListener('keydown', handleKey)
-      } else {
-        enableBodyScroll(ref.current)
-      }
     }
     return () => {
       window.removeEventListener('keydown', handleKey)
@@ -44,22 +34,18 @@ const Modal: FC<ModalProps> = ({ children, open, onClose, onEnter = null }) => {
   }, [open, handleKey])
 
   return (
-    <Portal>
+    <div className={s.root}>
-      {open ? (
+      <div className={s.modal} role="dialog" ref={ref}>
-        <div className={s.root}>
+        <button
-          <div className={s.modal} role="dialog" ref={ref}>
+          onClick={() => onClose()}
-            <button
+          aria-label="Close panel"
-              onClick={() => onClose()}
+          className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
-              aria-label="Close panel"
+        >
-              className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
+          <Cross className="h-6 w-6" />
-            >
+        </button>
-              <Cross className="h-6 w-6" />
+        <FocusTrap focusFirst>{children}</FocusTrap>
-            </button>
+      </div>
-            <FocusTrap focusFirst>{children}</FocusTrap>
+    </div>
-          </div>
-        </div>
-      ) : null}
-    </Portal>
   )
 }
 

components/ui/Sidebar/Sidebar.module.css

@@ -6,3 +6,9 @@
   @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
   min-width: 335px;
 }
+
+.backdrop {
+  @apply absolute inset-0 bg-black bg-opacity-40 transition transition-opacity duration-100 ease-linear;
+  backdrop-filter: blur(0.8px);
+  -webkit-backdrop-filter: blur(0.8px);
+}

components/ui/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
-import s from './Sidebar.module.css'
-import Portal from '@reach/portal'
 import { FC, useEffect, useRef } from 'react'
+import s from './Sidebar.module.css'
+import cn from 'classnames'
 import {
   disableBodyScroll,
   enableBodyScroll,
@@ -9,47 +9,33 @@ import {
 
 interface SidebarProps {
   children: any
-  open: boolean
   onClose: () => void
 }
 
-const Sidebar: FC<SidebarProps> = ({ children, open = false, onClose }) => {
+const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   // setTimeout(() => {
+    console.log('Sidebar', ref)
-  //   //   if (ref.current && open) {
+    if (ref.current) {
-  //   //     window.document.body.style.overflow = 'hidden'
+      disableBodyScroll(ref.current)
-  //   //     disableBodyScroll(ref.current)
+    }
-  //   //   } else {
+    return () => {
-  //   //     window.document.body.style.overflow &&
+      clearAllBodyScrollLocks()
-  //   //       setTimeout(() => (window.document.body.style.overflow = 'unset'), 30)
+    }
-  //   //     !!ref.current && enableBodyScroll(ref.current)
+  }, [])
-  //   //   }
-  //   // }, 30)
-  //   return () => {
-  //     clearAllBodyScrollLocks()
-  //   }
-  // }, [open])
 
   return (
-    <Portal>
+    <div className={cn(s.root)} ref={ref}>
-      {open && (
+      <div className="absolute inset-0 overflow-hidden">
-        <div className={s.root} ref={ref}>
+        <div className={s.backdrop} onClick={onClose} />
-          <div className="absolute inset-0 overflow-hidden">
+        <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
-            <div
+          <div className="h-full md:w-screen md:max-w-md">
-              className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
+            <div className={s.sidebar}>{children}</div>
-              onClick={onClose}
-            />
-            <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
-              <div className="h-full md:w-screen md:max-w-md">
-                <div className={s.sidebar}>{children}</div>
-              </div>
-            </section>
           </div>
-        </div>
+        </section>
-      )}
+      </div>
-    </Portal>
+    </div>
   )
 }
 

package.json

@@ -19,7 +19,6 @@
     "node": "14.x"
   },
   "dependencies": {
-    "@reach/portal": "^0.15.0",
     "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.6",