Changes

components/core/UserNav/DropdownMenu.module.css

@@ -1,17 +1,8 @@
 .dropdownMenu {
-  @apply fixed pt-6 right-0 z-20 w-full h-full;
+  @apply fixed right-0 mt-7 origin-top-right outline-none bg-primary z-40 w-full h-full;
 
   @screen lg {
-    @apply absolute right-0 w-screen;
+    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
-    max-width: 185px;
-  }
-
-  & .dropdownMenuContainer {
-    @apply flex-col py-6 bg-primary h-full justify-around;
-
-    @screen lg {
-      @apply border border-accents-1 shadow-lg py-2 h-auto;
-    }
   }
 
   & .link {

components/core/UserNav/DropdownMenu.tsx

@@ -4,21 +4,32 @@ import { useTheme } from 'next-themes'
 import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
-import { Menu } from '@headlessui/react'
+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 { theme, setTheme } = useTheme()
+  usePreventScroll()
   return (
-    <nav className={cn(s.dropdownMenu)}>
+    <Transition
-      <Menu.Items className={s.dropdownMenuContainer}>
+      show={open}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <Menu.Items className={s.dropdownMenu}>
         <Menu.Item>
           {({ active }) => <a className={s.link}>My Purchases</a>}
         </Menu.Item>
@@ -54,7 +65,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
           )}
         </Menu.Item>
       </Menu.Items>
-    </nav>
+    </Transition>
   )
 }
 

components/core/UserNav/UserNav.tsx

@@ -2,12 +2,11 @@ import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
 import { FC, useRef } from 'react'
-
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 
 interface Props {
@@ -59,17 +58,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
                   <Menu.Button className="inline-flex justify-center">
                     <Avatar />
                   </Menu.Button>
-                  <Transition
+                  <DropdownMenu onClose={closeDropdown} open={open} />
-                    show={open}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <DropdownMenu onClose={closeDropdown} />
-                  </Transition>
                 </>
               )}
             </Menu>

components/ui/Modal/Modal.tsx

@@ -2,13 +2,7 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import {
+import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayProvider,
-  OverlayContainer,
-} from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {