Removing HeadlessUI and React-Aria

components/common/UserNav/DropdownMenu.tsx

@@ -1,16 +1,16 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import { useTheme } from 'next-themes'
 import cn from 'classnames'
+import Link from 'next/link'
+import { FC, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { useRouter } from 'next/router'
 import s from './DropdownMenu.module.css'
+import { Avatar } from '@components/common'
 import { Moon, Sun } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import { Menu, Transition } from '@headlessui/react'
-import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
-import { useRouter } from 'next/router'
 
+import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
 interface DropdownMenuProps {
-  open: boolean
+  open?: boolean
 }
 
 const LINKS = [
@@ -29,68 +29,70 @@ const LINKS = [
 ]
 
 const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
-  const { theme, setTheme } = useTheme()
   const logout = useLogout()
   const { pathname } = useRouter()
-
+  const { theme, setTheme } = useTheme()
+  const [display, setDisplay] = useState(false)
   const { closeSidebarIfPresent } = useUI()
 
   return (
-    <Transition
-      show={open}
-      enter="transition ease-out duration-150 z-20"
-      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}>
-        {LINKS.map(({ name, href }) => (
-          <Menu.Item key={href}>
-            <div>
-              <Link href={href}>
-                <a
-                  className={cn(s.link, {
-                    [s.active]: pathname === href,
-                  })}
-                  onClick={closeSidebarIfPresent}
-                >
-                  {name}
-                </a>
-              </Link>
-            </div>
-          </Menu.Item>
-        ))}
-        <Menu.Item>
-          <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>
-          <a
-            className={cn(s.link, 'border-t border-accents-2 mt-4')}
-            onClick={() => logout()}
-          >
-            Logout
-          </a>
-        </Menu.Item>
-      </Menu.Items>
-    </Transition>
+    <div>
+      <button
+        className={s.avatarButton}
+        onClick={() => setDisplay(!display)}
+        aria-label="Menu"
+      >
+        <Avatar />
+      </button>
+
+      {display && (
+        <ul className={s.dropdownMenu}>
+          {LINKS.map(({ name, href }) => (
+            <li key={href}>
+              <div>
+                <Link href={href}>
+                  <a
+                    className={cn(s.link, {
+                      [s.active]: pathname === href,
+                    })}
+                    onClick={closeSidebarIfPresent}
+                  >
+                    {name}
+                  </a>
+                </Link>
+              </div>
+            </li>
+          ))}
+          <li>
+            <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>
+          </li>
+          <li>
+            <a
+              className={cn(s.link, 'border-t border-accents-2 mt-4')}
+              onClick={() => logout()}
+            >
+              Logout
+            </a>
+          </li>
+        </ul>
+      )}
+    </div>
   )
 }
 

components/common/UserNav/UserNav.tsx

@@ -3,12 +3,11 @@ import Link from 'next/link'
 import cn from 'classnames'
 import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
 import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
-import { Menu } from '@headlessui/react'
 import { Heart, Bag } from '@components/icons'
-import { Avatar } from '@components/common'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
+import { Avatar } from '@components/common'
 
 interface Props {
   className?: string
@@ -21,9 +20,9 @@ const countItems = (count: number, items: any[]) =>
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
-
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+
   return (
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
@@ -41,16 +40,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </li>
           <li className={s.item}>
             {customer ? (
-              <Menu>
-                {({ open }) => (
-                  <>
-                    <Menu.Button className={s.avatarButton} aria-label="Menu">
-                      <Avatar />
-                    </Menu.Button>
-                    <DropdownMenu open={open} />
-                  </>
-                )}
-              </Menu>
+              <DropdownMenu />
             ) : (
               <button
                 className={s.avatarButton}