diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index b688295..c489c1b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -30,12 +30,14 @@ const preview: Preview = {
dayjs.locale(i18n.language);
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
},
],
diff --git a/components/mega-nav.tsx b/components/mega-nav.tsx
index 23ad9b0..a11d5f8 100644
--- a/components/mega-nav.tsx
+++ b/components/mega-nav.tsx
@@ -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,
@@ -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<
@@ -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 (
-
-