fix!: Add overlay for Meganav

ably · Feb 12, 2025 · 809e7fa · 809e7fa
1 parent b9f7c7c
commit 809e7fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/src/core/Flyout.tsx b/src/core/Flyout.tsx
@@ -9,6 +9,7 @@ import {
   NavigationMenuLink,
 } from "@radix-ui/react-navigation-menu";
 import cn from "./utils/cn";
+import { componentMaxHeight, HEADER_HEIGHT } from "./utils/heights";
 
 /**
  * Props for the Flyout component.
@@ -65,13 +66,15 @@ const DEFAULT_VIEWPORT_STYLING =
 const PANEL_ANIMATION =
   "data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";
 
-export const FlyOverlay = ({ className }: { className: string }) => {
-  return (
-    <div
-      className={cn("absolute left-0 right-0 h-screen w-full", className)}
-    ></div>
-  );
-};
+export const FlyOverlay = ({ className }: { className: string }) => (
+  <div
+    className={cn(
+      "absolute left-0 right-0 h-screen w-full opacity-0 animate-[fadeInTenPercent_200ms_ease]",
+      className,
+    )}
+    style={{ height: componentMaxHeight(HEADER_HEIGHT) }}
+  ></div>
+);
 
 const Flyout = ({
   menuItems,
@@ -85,7 +88,7 @@ const Flyout = ({
   return (
     <NavigationMenu
       className={cn(className, "flex w-full")}
-      onValueChange={(val) => (val ? setIsOpen(true) : setIsOpen(false))}
+      onValueChange={(val) => setIsOpen(!!val)}
     >
       <NavigationMenuList className="flex list-none center">
         {menuItems.map(({ label, content, link, panelStyling }) =>

diff --git a/src/core/Flyout/Flyout.stories.tsx b/src/core/Flyout/Flyout.stories.tsx
@@ -126,21 +126,18 @@ const menuItems = [
 const FlyoutStory = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const flyOutDefaultArgs = {
-    menuItems: menuItems,
-    className: "justify-center relative z-40 ui-standard-container",
-    flyOutClassName: "flex w-full justify-center",
-    viewPortClassName:
-      "ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8",
-    hasAnimation: true,
-    setIsOpen: setIsOpen,
-  };
-
   return (
     <div>
-      <Flyout {...flyOutDefaultArgs} />
+      <Flyout
+        menuItems={menuItems}
+        className="justify-center relative z-40 ui-standard-container"
+        flyOutClassName="flex w-full justify-center"
+        viewPortClassName="ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8"
+        hasAnimation={true}
+        setIsOpen={setIsOpen}
+      />
       {isOpen && (
-        <FlyOverlay className="top-[52px] bg-neutral-1300 opacity-10 z-20" />
+        <FlyOverlay className="bg-neutral-1300 opacity-10 z-20 h-screen" />
       )}
     </div>
   );