Dismissable Dropdown

components/core/UserNav/DropdownMenu.module.css

@@ -0,0 +1,25 @@
+.dropdownMenu {
+  @apply fixed top-0 right-0 z-20 w-full h-full;
+
+  @screen lg {
+    @apply absolute right-0 w-screen;
+    max-width: 160px;
+  }
+
+  & .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 {
+    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    text-transform: capitalize;
+  }
+
+  &.off {
+    @apply hidden;
+  }
+}

components/core/UserNav/DropdownMenu.tsx

@@ -0,0 +1,70 @@
+import { useTheme } from 'next-themes'
+import s from './DropdownMenu.module.css'
+import { FC } from 'react'
+import { FocusScope } from '@react-aria/focus'
+import {
+  useOverlay,
+  DismissButton,
+  usePreventScroll,
+} from '@react-aria/overlays'
+import Link from 'next/link'
+import cn from 'classnames'
+
+interface DropdownMenuProps {
+  onClose: () => void
+  innerRef: React.MutableRefObject<HTMLInputElement>
+}
+
+const DropdownMenu: FC<DropdownMenuProps> = ({
+  onClose,
+  children,
+  innerRef,
+  ...props
+}) => {
+  const { theme, setTheme } = useTheme()
+
+  let { overlayProps } = useOverlay(
+    {
+      isDismissable: true,
+      onClose: onClose,
+      isOpen: true,
+    },
+    innerRef
+  )
+
+  usePreventScroll()
+  return (
+    <FocusScope restoreFocus>
+      <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
+        {/* Needed placeholder for User Interation*/}
+        <div className="flex justify-end">
+          <span onClick={onClose} className="bg-transparent h-12 w-12" />
+        </div>
+
+        <nav className={s.dropdownMenuContainer}>
+          <Link href="#">
+            <a className={s.link}>My Purchases</a>
+          </Link>
+          <Link href="#">
+            <a className={s.link}>My Account</a>
+          </Link>
+          <a
+            className={s.link}
+            onClick={() =>
+              theme === 'dark' ? setTheme('light') : setTheme('dark')
+            }
+          >
+            Theme: <strong>{theme}</strong>
+          </a>
+          <Link href="#">
+            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
+              Logout
+            </a>
+          </Link>
+        </nav>
+      </div>
+    </FocusScope>
+  )
+}
+
+export default DropdownMenu

components/core/UserNav/UserNav.module.css

@@ -20,28 +20,3 @@
     @apply mr-0;
   }
 }
-
-.dropdownMenu {
-  @apply fixed top-0 right-0 z-20 w-full h-full;
-
-  @screen lg {
-    @apply absolute right-0 w-screen;
-    max-width: 160px;
-  }
-
-  & .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 {
-    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
-  }
-
-  &.off {
-    @apply hidden;
-  }
-}

components/core/UserNav/UserNav.tsx

@@ -1,18 +1,13 @@
 import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
-import { FC, useState, useRef, useCallback } from 'react'
-import { useTheme } from 'next-themes'
+import { FC, useRef } from 'react'
+
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
-import { FocusScope } from '@react-aria/focus'
+import DropdownMenu from './DropdownMenu'
 
-import {
-  useOverlay,
-  DismissButton,
-  usePreventScroll,
-} from '@react-aria/overlays'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 
 interface Props {
@@ -73,57 +68,4 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
   )
 }
 
-interface DropdownMenuProps {
-  onClose: () => void
-  innerRef: React.MutableRefObject<HTMLInputElement>
-}
-
-const DropdownMenu: FC<DropdownMenuProps> = ({
-  onClose,
-  children,
-  innerRef,
-  ...props
-}) => {
-  const { theme, setTheme } = useTheme()
-
-  let { overlayProps } = useOverlay(
-    {
-      isDismissable: true,
-      onClose: onClose,
-      isOpen: true,
-    },
-    innerRef
-  )
-
-  usePreventScroll()
-  return (
-    <FocusScope restoreFocus>
-      <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
-        <span onClick={onClose} className="w-full bg-transparent block h-12" />
-        <nav className={s.dropdownMenuContainer}>
-          <Link href="#">
-            <a className={s.link}>My Purchases</a>
-          </Link>
-          <Link href="#">
-            <a className={s.link}>My Account</a>
-          </Link>
-          <a
-            className={s.link}
-            onClick={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          >
-            Theme: <strong>{theme}</strong>
-          </a>
-          <Link href="#">
-            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
-              Logout
-            </a>
-          </Link>
-        </nav>
-      </div>
-    </FocusScope>
-  )
-}
-
 export default UserNav