Skip to content

Commit

Permalink
fix: select menu button render fixed (#27)
Browse files Browse the repository at this point in the history
  • Loading branch information
@olegshilov
olegshilov committed Aug 28, 2024
1 parent 7e76ddf commit 4c37358
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 124 deletions.
3 changes: 2 additions & 1 deletion src/app/[locale]/shariah/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
6 changes: 0 additions & 6 deletions src/components/pages/shariah-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,22 +178,19 @@ 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>
</ScrollSpySection>
<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}
>
Expand All @@ -202,7 +199,6 @@ export function ShariahPage({
</div>
</ScrollSpySection>
<ScrollSpySection
// threshold={[0.2, 0.5]}
id="shariah-board"
onSectionInView={handleSectionInView}
>
Expand All @@ -226,7 +222,6 @@ export function ShariahPage({
</div>
</ScrollSpySection>
<ScrollSpySection
// threshold={[0.2, 0.5]}
id="advisory-board"
onSectionInView={handleSectionInView}
>
Expand All @@ -245,7 +240,6 @@ export function ShariahPage({
</div>
</ScrollSpySection>
<ScrollSpySection
// threshold={[0.2, 0.5]}
id="executive-board"
onSectionInView={handleSectionInView}
>
Expand Down
14 changes: 2 additions & 12 deletions src/components/ui/header-desktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}
Expand Down
64 changes: 21 additions & 43 deletions src/components/ui/modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand All @@ -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}
/>
);
}

Expand Down Expand Up @@ -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>
);
}
109 changes: 47 additions & 62 deletions src/components/ui/select.tsx
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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',
Expand Down Expand Up @@ -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>
);
}
5 changes: 5 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {},
},
Expand Down

1 comment on commit 4c37358

@vercel
Copy link

@vercel vercel bot commented on 4c37358 Aug 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

islamic-website – ./

islamic-coin.vercel.app
islamic-website-git-main-haqq-network.vercel.app
islm.ae
www.islamiccoin.net
islamiccoin.net
islamic-website-haqq-network.vercel.app
www.islm.ae

Please sign in to comment.