Skip to content

Commit

Permalink
Use @reach/dialog instead of headless-ui dialog
Browse files Browse the repository at this point in the history
Fixes an issue with an ios bug.
See here for details: tailwindlabs/headlessui#2181
  • Loading branch information
sean-clayton committed Apr 26, 2023
1 parent 5cca6cb commit d13f471
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 100 deletions.
14 changes: 8 additions & 6 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,14 @@ const preview: Preview = {
dayjs.locale(i18n.language);

return (
<I18nextProvider i18n={i18n}>
<FontStyles />
<div className="dark:text-white">
<Story />
</div>
</I18nextProvider>
<React.StrictMode>
<I18nextProvider i18n={i18n}>
<FontStyles />
<div className="dark:text-white">
<Story />
</div>
</I18nextProvider>
</React.StrictMode>
);
},
],
Expand Down
70 changes: 39 additions & 31 deletions components/mega-nav.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Fragment, useCallback, useState } from "react";
import { Dialog, Popover, Transition, Disclosure } from "@headlessui/react";
import { Fragment, useCallback, useEffect, useState } from "react";
import { Popover, Transition, Disclosure } from "@headlessui/react";
import { DialogOverlay, DialogContent } from "@reach/dialog";
import {
Bars3Icon,
ChevronDownIcon,
Expand All @@ -14,6 +15,7 @@ import { Navigation, SubNav, SubNavWithName } from "@/lib/navigation";
import { useTranslation } from "next-i18next";
import { PartialBy, PickPartial } from "@/utils";
import VaultsLogo from "./vaults-logo";
import { AnimatePresence, motion } from "framer-motion";

interface MobileSubnavP {
subnav: PartialBy<
Expand Down Expand Up @@ -85,37 +87,43 @@ function MobileSubnav({ subnav, onLinkClick }: MobileSubnavP) {
export default function MegaNav({ navigation }: { navigation: Navigation }) {
const [open, setOpen] = useState(false);
const { t } = useTranslation("common");

const handleToggleOpen = useCallback(() => {
setOpen(!open);
}, [open]);

const closeDrawer = useCallback(() => {
setOpen(false);
}, []);

useEffect(() => {}, [open]);

const AnimatedDialogOverlay = motion(DialogOverlay);
const AnimatedDialogContent = motion(DialogContent);

return (
<div className="bg-stone-950">
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative lg:hidden" onClose={setOpen}>
<Transition.Child
as={Fragment}
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed top-14 left-0 right-0 bottom-0 bg-black bg-opacity-50" />
</Transition.Child>

<div className="fixed top-14 left-0 right-0 bottom-0 flex">
<Transition.Child
as={Fragment}
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
<div className="flex">
<AnimatePresence>
{open ? (
<AnimatedDialogOverlay
onDismiss={closeDrawer}
className="fixed top-14 left-0 right-0 bottom-0"
>
<Dialog.Panel className="relative flex w-full max-w-xs flex-col overflow-y-auto bg-stone-950 border-r border-stone-800 pb-12 shadow-xl">
<motion.div
className="absolute inset-0 bg-black/50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ ease: "linear", duration: 0.3 }}
></motion.div>
<AnimatedDialogContent
transition={{ ease: "easeInOut", duration: 0.3 }}
initial={{ x: "calc(100% * -1)" }}
animate={{ x: 0 }}
exit={{ x: "calc(100% * -1)" }}
className="fixed top-14 bottom-0 right-0 left-0 flex w-full max-w-xs flex-col overflow-y-auto bg-stone-950 border-r border-stone-800 pb-12 shadow-xl"
>
{map(navigation.main, (navItem) => (
<Disclosure
as="div"
Expand Down Expand Up @@ -175,11 +183,11 @@ export default function MegaNav({ navigation }: { navigation: Navigation }) {
{t("nav.buy-13th-age-label")}
</a>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
</AnimatedDialogContent>
</AnimatedDialogOverlay>
) : null}
</AnimatePresence>
</div>

<div className="relative">
<nav aria-label="Top">
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"dependencies": {
"@headlessui/react": "^1.7.9",
"@heroicons/react": "^2.0.14",
"@reach/dialog": "^0.18.0",
"clsx": "^1.2.1",
"contentlayer": "^0.3.2",
"dayjs": "^1.11.7",
Expand Down Expand Up @@ -55,7 +56,7 @@
"autoprefixer": "^10.4.13",
"eslint-plugin-storybook": "^0.6.11",
"eslint-plugin-unicorn": "^45.0.2",
"framer-motion": "^9.0.1",
"framer-motion": "^10.12.4",
"github-slugger": "^2.0.0",
"path-browserify": "^1.0.1",
"postcss": "^8.4.21",
Expand Down
Loading

0 comments on commit d13f471

Please sign in to comment.