Merge branch 'master' into arzafran/homepage-tweaks

components/core/UserNav/DropdownMenu.module.css

@@ -1,9 +1,9 @@
 .dropdownMenu {
-  @apply fixed top-0 right-0 z-20 w-full h-full;
+  @apply fixed pt-6 right-0 z-20 w-full h-full;
 
   @screen lg {
     @apply absolute right-0 w-screen;
-    max-width: 200px;
+    max-width: 185px;
   }
 
   & .dropdownMenuContainer {
@@ -15,12 +15,8 @@
   }
 
   & .link {
-    @apply flex space-x-2 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 items-center;
+    @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
     text-transform: capitalize;
-
-    & .icons svg {
-      @apply w-6 h-6;
-    }
   }
 
   &.off {

components/core/UserNav/DropdownMenu.tsx

@@ -1,74 +1,60 @@
-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 { 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'
 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')
-            }
-          >
-            <span>
-              Theme: <strong>{theme}</strong>{' '}
-            </span>
-            <span className={s.icons}>
-              {theme === 'dark' ? <Moon /> : <Sun />}
-            </span>
-          </a>
-          <Link href="#">
+    <nav className={cn(s.dropdownMenu)}>
+      <Menu.Items className={s.dropdownMenuContainer}>
+        <Menu.Item>
+          {({ active }) => <a className={s.link}>My Purchases</a>}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => <a className={s.link}>My Account</a>}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => (
+            <a
+              className={cn(s.link, 'justify-between')}
+              onClick={() =>
+                theme === 'dark' ? setTheme('light') : setTheme('dark')
+              }
+            >
+              <div>
+                Theme: <strong>{theme}</strong>{' '}
+              </div>
+              <div className="ml-3">
+                {theme == 'dark' ? (
+                  <Moon width={20} height={20} />
+                ) : (
+                  <Sun width="20" height={20} />
+                )}
+              </div>
+            </a>
+          )}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => (
             <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
               Logout
             </a>
-          </Link>
-        </nav>
-      </div>
-    </FocusScope>
+          )}
+        </Menu.Item>
+      </Menu.Items>
+    </nav>
   )
 }
 

components/core/UserNav/UserNav.module.css

@@ -13,7 +13,7 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
 
   &:hover {
-    @apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
+    @apply text-accents-8;
   }
 
   &.heart:hover svg {

components/core/UserNav/UserNav.tsx

@@ -7,7 +7,7 @@ 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 useCart from '@lib/bigcommerce/cart/use-cart'
 
 interface Props {
@@ -52,18 +52,30 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
               <Heart />
             </li>
           </Link>
-          <li
-            className={s.item}
-            onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
-          >
-            <Avatar />
+          <li className={s.item}>
+            <Menu>
+              {({ open }) => (
+                <>
+                  <Menu.Button className="inline-flex justify-center">
+                    <Avatar />
+                  </Menu.Button>
+                  <Transition
+                    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>
           </li>
         </ul>
       </div>
-
-      {displayDropdown && (
-        <DropdownMenu onClose={closeDropdown} innerRef={ref} />
-      )}
     </nav>
   )
 }

components/icon/Moon.tsx

@@ -10,6 +10,7 @@ const Moon = ({ ...props }) => {
       stroke-linejoin="round"
       fill="none"
       shape-rendering="geometricPrecision"
+      {...props}
     >
       <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
     </svg>

components/icon/Sun.tsx

@@ -10,6 +10,7 @@ const Sun = ({ ...props }) => {
       stroke-linejoin="round"
       fill="none"
       shape-rendering="geometricPrecision"
+      {...props}
     >
       <circle cx="12" cy="12" r="5" />
       <path d="M12 1v2" />