From 4c3735812b1e88a33d99b6f8d040383190e5ccd6 Mon Sep 17 00:00:00 2001
From: Oleg Shilov <me@olegshilov.com>
Date: Wed, 28 Aug 2024 15:10:04 +0700
Subject: [PATCH] fix: select menu button render fixed (#27)

---
 src/app/[locale]/shariah/page.tsx     |   3 +-
 src/components/pages/shariah-page.tsx |   6 --
 src/components/ui/header-desktop.tsx  |  14 +---
 src/components/ui/modal.tsx           |  64 +++++----------
 src/components/ui/select.tsx          | 109 +++++++++++---------------
 tailwind.config.js                    |   5 ++
 6 files changed, 77 insertions(+), 124 deletions(-)

diff --git a/src/app/[locale]/shariah/page.tsx b/src/app/[locale]/shariah/page.tsx
index 7b166f9..9148ed5 100644
--- a/src/app/[locale]/shariah/page.tsx
+++ b/src/app/[locale]/shariah/page.tsx
@@ -21,10 +21,11 @@ export const metadata: Metadata = {
   },
 };
 export default async function Page({
-  params: { locale },
+  params,
 }: {
   params: { locale: SupportedLocales };
 }) {
+  const { locale } = params;
   const [fatwa, members] = await Promise.all([
     await getFatwaContentFromFalconer(locale),
     await getMembersContentFromFalconer(locale),
diff --git a/src/components/pages/shariah-page.tsx b/src/components/pages/shariah-page.tsx
index 9704341..1e03753 100644
--- a/src/components/pages/shariah-page.tsx
+++ b/src/components/pages/shariah-page.tsx
@@ -178,7 +178,6 @@ export function ShariahPage({
                   onSectionInView={handleSectionInView}
                   initialInView
                 >
-                  {/* <div className="border-b-[1px] border-[#2F2F2F] pb-[32px] pt-[32px] md:pb-[60px] lg:pb-[80px]"> */}
                   <div className="pb-[32px] pt-[32px] md:pb-[60px] lg:pb-[80px]">
                     <FatwaBlock locale={locale} fatwa={fatwa} />
                   </div>
@@ -186,14 +185,12 @@ export function ShariahPage({
                 <ScrollSpySection
                   id="foundations"
                   onSectionInView={handleSectionInView}
-                  // threshold={[0.2, 0.5]}
                 >
                   <div className="py-[32px] md:py-[60px] lg:py-[80px]">
                     <FoundationsBlock />
                   </div>
                 </ScrollSpySection>
                 <ScrollSpySection
-                  // threshold={[0.2, 0.5]}
                   id="shariah-oracle"
                   onSectionInView={handleSectionInView}
                 >
@@ -202,7 +199,6 @@ export function ShariahPage({
                   </div>
                 </ScrollSpySection>
                 <ScrollSpySection
-                  // threshold={[0.2, 0.5]}
                   id="shariah-board"
                   onSectionInView={handleSectionInView}
                 >
@@ -226,7 +222,6 @@ export function ShariahPage({
                   </div>
                 </ScrollSpySection>
                 <ScrollSpySection
-                  // threshold={[0.2, 0.5]}
                   id="advisory-board"
                   onSectionInView={handleSectionInView}
                 >
@@ -245,7 +240,6 @@ export function ShariahPage({
                   </div>
                 </ScrollSpySection>
                 <ScrollSpySection
-                  // threshold={[0.2, 0.5]}
                   id="executive-board"
                   onSectionInView={handleSectionInView}
                 >
diff --git a/src/components/ui/header-desktop.tsx b/src/components/ui/header-desktop.tsx
index e5a7031..3f3af36 100644
--- a/src/components/ui/header-desktop.tsx
+++ b/src/components/ui/header-desktop.tsx
@@ -6,7 +6,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 import { LocaleLink } from '@/navigation';
@@ -93,22 +92,13 @@ function HeaderDropdown({
         </svg>
       </div>
 
-      <Transition
-        as={Fragment}
-        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"
-        show={isDropdownOpen}
-      >
+      {isDropdownOpen && (
         <div className="absolute left-1/2 top-full min-w-max origin-center translate-x-[-50%]">
           <div className="w-fit rounded-xl bg-[#15191ef2] p-[8px] backdrop-blur">
             {children}
           </div>
         </div>
-      </Transition>
+      )}
     </div>
   );
 }
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index e368487..cc4f429 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -1,11 +1,6 @@
 'use client';
-import {
-  Fragment,
-  PropsWithChildren,
-  SyntheticEvent,
-  useCallback,
-} from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { PropsWithChildren, SyntheticEvent, useCallback } from 'react';
+import { Dialog } from '@headlessui/react';
 import clsx from 'clsx';
 
 function ModalOverlay({ onClose }: { onClose: () => void }) {
@@ -22,22 +17,12 @@ function ModalOverlay({ onClose }: { onClose: () => void }) {
   );
 
   return (
-    <Transition.Child
-      as={Fragment}
-      enter="ease-out duration-300"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="ease-in duration-200"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
-      <div
-        role="none"
-        className="bg-islamic-modal-overlay fixed inset-0 transform-gpu backdrop-blur"
-        onClick={onClose}
-        onKeyDown={handleKeydown}
-      />
-    </Transition.Child>
+    <div
+      role="none"
+      className="bg-islamic-modal-overlay animate-reveal fixed inset-0 transform-gpu backdrop-blur"
+      onClick={onClose}
+      onKeyDown={handleKeydown}
+    />
   );
 }
 
@@ -90,28 +75,21 @@ export function Modal({
   onClose: () => void;
 }>) {
   return (
-    <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-[9999]" onClose={onClose}>
-        <ModalOverlay onClose={onClose} />
+    <Dialog
+      as="div"
+      className="relative z-[9999]"
+      onClose={onClose}
+      open={isOpen}
+    >
+      <ModalOverlay onClose={onClose} />
 
-        <div className="pointer-events-none fixed inset-0 overflow-y-auto">
-          <div className="pointer-events-none flex min-h-full items-center justify-center p-4">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-200"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-150"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <div className="pointer-events-auto transform transition-all">
-                {children}
-              </div>
-            </Transition.Child>
+      <div className="pointer-events-none fixed inset-0 overflow-y-auto">
+        <div className="pointer-events-none flex min-h-full items-center justify-center p-4">
+          <div className="pointer-events-auto transform transition-all">
+            {children}
           </div>
         </div>
-      </Dialog>
-    </Transition>
+      </div>
+    </Dialog>
   );
 }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 3e9c791..6dfc87c 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
 'use client';
-import { Fragment, useMemo } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { useMemo } from 'react';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import clsx from 'clsx';
 
 export function Select({
@@ -25,7 +25,7 @@ export function Select({
   const optionsToRender = useMemo(() => {
     return variants.map(({ id, title }) => {
       return (
-        <Menu.Item
+        <MenuItem
           as="div"
           className={clsx(
             'block w-full min-w-fit whitespace-nowrap px-[16px] py-[8px] font-vcr text-base uppercase hover:bg-[#ffffff14] rtl:font-handjet',
@@ -59,75 +59,60 @@ export function Select({
               />
             </svg>
           )}
-        </Menu.Item>
+        </MenuItem>
       );
     });
   }, [current, onChange, variants]);
 
   return (
     <Menu as="div" className={clsx('relative inline-block w-full', className)}>
-      <Menu.Button as={Fragment}>
-        {({ open }) => {
-          return (
-            <button
-              className={clsx(
-                'flex h-[48px] flex-row items-center justify-between gap-[6px] rounded-[8px] px-[16px] py-[12px]',
-                'font-vcr text-base rtl:font-handjet',
-                'transition-colors duration-300 ease-out',
-                'box-border appearance-none outline-none',
-                'hover:text-haqq-black w-full uppercase text-white',
-                open ? 'bg-[#585858]' : 'bg-[#2F2F2F]',
-              )}
-            >
-              <div>
-                {currentValue ? (
-                  <span>{currentValue.title}</span>
-                ) : (
-                  <span className="text-white/50">{placeholder}</span>
-                )}
-              </div>
-
-              <svg
-                width="22"
-                height="22"
-                viewBox="0 0 22 22"
-                fill="none"
-                className={clsx(
-                  'mb-[-2px] mr-[-6px]',
-                  'transition-transform duration-150 ease-in',
-                  open && 'scale-y-[-1]',
-                )}
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M4.85156 8.89817L6.14793 7.60181L10.9997 12.4536L15.8516 7.60181L17.1479 8.89817L10.9997 15.0464L4.85156 8.89817Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          );
-        }}
-      </Menu.Button>
-
-      <Transition
-        as={Fragment}
-        enter="ease-out duration-100"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="ease-in duration-75"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
+      <MenuButton
+        as="button"
+        className={clsx(
+          'flex h-[48px] flex-row items-center justify-between gap-[6px] rounded-[8px] px-[16px] py-[12px]',
+          'font-vcr text-base rtl:font-handjet',
+          'transition-colors duration-300 ease-out',
+          'box-border appearance-none outline-none',
+          'hover:text-haqq-black w-full uppercase text-white',
+          'data-[open]:bg-[#585858] [&:not([data-open])]:bg-[#2F2F2F]',
+        )}
       >
-        <Menu.Items
+        <div>
+          {currentValue ? (
+            <span>{currentValue.title}</span>
+          ) : (
+            <span className="text-white/50">{placeholder}</span>
+          )}
+        </div>
+
+        <svg
+          width="22"
+          height="22"
+          viewBox="0 0 22 22"
+          fill="none"
           className={clsx(
-            'absolute left-[0px] z-10 mt-[4px] w-fit min-w-full origin-top rounded-[8px] bg-[#2f2f2f] py-[8px] shadow-lg focus:outline-none',
-            'max-h-[256px] overflow-y-scroll',
+            'mb-[-2px] mr-[-6px]',
+            'transition-transform duration-150 ease-in',
+            'group-data-[open]:scale-y-[-1]',
           )}
         >
-          {optionsToRender}
-        </Menu.Items>
-      </Transition>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.85156 8.89817L6.14793 7.60181L10.9997 12.4536L15.8516 7.60181L17.1479 8.89817L10.9997 15.0464L4.85156 8.89817Z"
+            fill="currentColor"
+          />
+        </svg>
+      </MenuButton>
+
+      <MenuItems
+        className={clsx(
+          'absolute left-[0px] z-10 mt-[4px] w-fit min-w-full origin-top rounded-[8px] bg-[#2f2f2f] py-[8px] shadow-lg focus:outline-none',
+          'max-h-[256px] overflow-y-scroll',
+        )}
+      >
+        {optionsToRender}
+      </MenuItems>
     </Menu>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 3d799c7..aa576a3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,10 +36,15 @@ const config = {
           from: { transform: 'translateX(0)' },
           to: { transform: 'translateX(-100%)' },
         },
+        reveal: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
+        },
       },
       animation: {
         'scroll-left': 'scroll-left 60s linear infinite',
         'scroll-right': 'scroll-right 60s linear infinite',
+        reveal: 'reveal 0.15s',
       },
       screens: {},
     },