Removing HeadlessUI and React-Aria

components/common/I18nWidget/I18nWidget.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react'
 import cn from 'classnames'
-import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { Menu } from '@headlessui/react'
-import { DoubleChevron } from '@components/icons'
+import { FC, useState } from 'react'
+import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
-
+import { Cross } from '@components/icons'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -32,6 +30,7 @@ const LOCALES_MAP: Record<string, LOCALE_DATA> = {
 }
 
 const I18nWidget: FC = () => {
+  const [display, setDisplay] = useState(false)
   const {
     locale,
     locales,
@@ -39,42 +38,61 @@ const I18nWidget: FC = () => {
     asPath: currentPath,
   } = useRouter()
   const options = locales?.filter((val) => val !== locale)
-
   const currentLocale = locale || defaultLocale
 
   return (
     <nav className={s.root}>
-      <Menu>
-        <Menu.Button className={s.button} aria-label="Language selector">
-          <img
-            className="block mr-2 w-5"
-            src={`/${LOCALES_MAP[currentLocale].img.filename}`}
-            alt={LOCALES_MAP[currentLocale].img.alt}
-          />
-          <span className="mr-2">{LOCALES_MAP[currentLocale].name}</span>
-          {options && (
-            <span>
-              <DoubleChevron />
-            </span>
-          )}
-        </Menu.Button>
-
-        {options?.length ? (
-          <Menu.Items className={s.dropdownMenu}>
-            {options.map((locale) => (
-              <Menu.Item key={locale}>
-                {({ active }) => (
+      <div className="flex items-center relative">
+        <button className={s.button} aria-label="Language selector" />
+        <img
+          className="block mr-2 w-5"
+          src={`/${LOCALES_MAP[currentLocale].img.filename}`}
+          alt={LOCALES_MAP[currentLocale].img.alt}
+        />
+        {options && (
+          <span className="cursor-pointer" onClick={() => setDisplay(!display)}>
+            <svg
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+              shapeRendering="geometricPrecision"
+            >
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </span>
+        )}
+      </div>
+      <div className="absolute top-0 right-0">
+        {options?.length && display ? (
+          <div className={s.dropdownMenu}>
+            <div className="flex flex-row justify-end px-6">
+              <button
+                onClick={() => setDisplay(false)}
+                aria-label="Close panel"
+                className={s.closeButton}
+              >
+                <Cross className="h-6 w-6" />
+              </button>
+            </div>
+            <ul>
+              {options.map((locale) => (
+                <li key={locale}>
                   <Link href={currentPath} locale={locale}>
-                    <a className={cn(s.item, { [s.active]: active })}>
+                    <a className={cn(s.item)} onClick={() => setDisplay(false)}>
                       {LOCALES_MAP[locale].name}
                     </a>
                   </Link>
-                )}
-              </Menu.Item>
-            ))}
-          </Menu.Items>
+                </li>
+              ))}
+            </ul>
+          </div>
         ) : null}
-      </Menu>
+      </div>
     </nav>
   )
 }

components/common/Layout/Layout.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 import React, { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
-import { usePreventScroll } from '@react-aria/overlays'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
@@ -56,10 +55,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
 
-  usePreventScroll({
-    isDisabled: !(displaySidebar || displayModal),
-  })
-
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>

components/common/Toggle/Toggle.module.css

@@ -1,2 +0,0 @@
-.root {
-}

components/common/Toggle/Toggle.tsx

@@ -1,55 +0,0 @@
-import React, { FC } from 'react'
-import { Switch } from '@headlessui/react'
-import { Moon, Sun } from '@components/icons'
-interface Props {
-  className?: string
-  checked: boolean
-  onChange: any
-}
-
-const Toggle: FC<Props> = ({ className, checked, onChange }) => {
-  return (
-    <Switch
-      checked={checked}
-      onChange={onChange}
-      className="focus:outline-none"
-    >
-      <span
-        role="checkbox"
-        aria-checked="false"
-        tabIndex={0}
-        className={`${
-          checked ? 'bg-gray-800' : 'bg-gray-200'
-        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
-      >
-        <span
-          aria-hidden="true"
-          className={`${
-            checked ? 'translate-x-5' : 'translate-x-0'
-          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
-        >
-          <span
-            className={`${
-              checked
-                ? 'opacity-0 ease-out duration-150'
-                : 'opacity-100 ease-in duration-150'
-            } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
-          >
-            <Sun className="h-3 w-3 text-accent-3" />
-          </span>
-          <span
-            className={`${
-              checked
-                ? 'opacity-100 ease-in duration-150'
-                : 'opacity-0 ease-out duration-150'
-            } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
-          >
-            <Moon className="h-3 w-3 text-yellow-400" />
-          </span>
-        </span>
-      </span>
-    </Switch>
-  )
-}
-
-export default Toggle

components/common/Toggle/index.ts

@@ -1 +0,0 @@
-export { default } from './Toggle'

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}

components/common/index.ts

@@ -5,7 +5,6 @@ export { default as Layout } from './Layout'
 export { default as Navbar } from './Navbar'
 export { default as Searchbar } from './Searchbar'
 export { default as UserNav } from './UserNav'
-export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'