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>
   )
 }