feat: Add overlay for Meganav

ably · Feb 6, 2025 · 6f011af · 6f011af
1 parent 8a6bbd2
commit 6f011af
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 109 deletions.
diff --git a/src/core/Flyout.tsx b/src/core/Flyout.tsx
@@ -9,7 +9,6 @@ import {
   NavigationMenuLink,
 } from "@radix-ui/react-navigation-menu";
 import cn from "./utils/cn";
-import { createPortal } from "react-dom";
 
 /**
  * Props for the Flyout component.
@@ -56,6 +55,7 @@ type FlyoutProps = {
    * Flag to indicate if animation should be applied.
    */
   hasAnimation: boolean;
+  setIsOpen: (val: boolean) => void;
 };
 
 const DEFAULT_MENU_LINK_STYLING =
@@ -65,41 +65,53 @@ 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>
+  );
+};
+
 const Flyout = ({
   menuItems,
   className,
   flyOutClassName,
   menuLinkClassName,
   viewPortClassName,
   hasAnimation,
+  setIsOpen,
 }: FlyoutProps) => {
   return (
-    <NavigationMenu className={cn(className, "flex w-full relative")}>
+    <NavigationMenu
+      className={cn(className, "flex w-full")}
+      onValueChange={(val) => (val ? setIsOpen(true) : setIsOpen(false))}
+    >
       <NavigationMenuList className="flex list-none center">
         {menuItems.map(({ label, content, link, panelStyling }) =>
           content ? (
             <NavigationMenuItem key={label}>
               <NavigationMenuTrigger
                 className={cn(
-                  "group outline-none focus:outline-none select-none cursor-pointer",
+                  "group outline-none focus:outline-none select-none cursor-pointer relative",
                   DEFAULT_MENU_LINK_STYLING,
                   menuLinkClassName,
                 )}
               >
                 {label}
               </NavigationMenuTrigger>
-              {createPortal(
-                <NavigationMenuContent
-                  className={cn(
-                    "absolute inset-x-0 top-0 p-24 z-10",
-                    hasAnimation && PANEL_ANIMATION,
-                    panelStyling,
-                  )}
-                >
-                  {content}
-                </NavigationMenuContent>,
-                document.body,
-              )}
+              <NavigationMenuContent
+                className={cn(
+                  "absolute inset-x-0 top-0 p-24 z-10",
+                  hasAnimation && PANEL_ANIMATION,
+                  panelStyling,
+                )}
+              >
+                {content}
+              </NavigationMenuContent>
             </NavigationMenuItem>
           ) : (
             <NavigationMenuLink key={label}>

diff --git a/src/core/Flyout/Flyout.stories.tsx b/src/core/Flyout/Flyout.stories.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import Flyout from "../Flyout";
+import React, { useState } from "react";
+import Flyout, { FlyOverlay } from "../Flyout";
 import ProductTile from "../ProductTile";
 import FeaturedLink from "../FeaturedLink";
 import { ProductName, products } from "../ProductTile/data";
@@ -17,10 +17,12 @@ const platforms = [
   "Security & Compliance",
 ];
 
-// Note: All the components and data used in this story are just temporary placeholders and will be added as separate component for the Meganav component that can be used here.
+const panelStyling = "w-full sm:w-[816px] bg-neutral-000 dark:bg-neutral-1300";
+
 const ProductsGrid = () => {
-  const [selectedProduct, setSelectedProduct] =
-    React.useState<ProductName | null>(null);
+  const [selectedProduct, setSelectedProduct] = useState<ProductName | null>(
+    null,
+  );
   return (
     <div className="grid grid-cols-2">
       {Object.keys(products).map((product) => (
@@ -80,8 +82,6 @@ const DefaultPanelLeft = ({ title, desc }: { title: string; desc: string }) => (
   </div>
 );
 
-const panelStyling = "w-full sm:w-[816px] bg-neutral-000 dark:bg-neutral-1300";
-
 const menuItems = [
   { label: "Home", content: null, link: "" },
   {
@@ -123,34 +123,55 @@ const menuItems = [
   { label: "Docs", content: null, link: "/docs" },
 ];
 
-const flyOutDefaultArgs = {
-  menuItems: menuItems,
-  className: "justify-center",
-  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,
-};
+const FlyoutStory = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
-export const Default = {
-  render: () => (
-    <div className="h-[450px]">
+  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} />
+      {isOpen && (
+        <FlyOverlay className="top-[52px] bg-neutral-1300 opacity-10 z-20" />
+      )}
     </div>
-  ),
+  );
+};
+
+export const Default = {
+  render: () => <FlyoutStory />,
 };
 
 export const StandardContainer = {
   render: () => (
-    <div className="ui-standard-container h-[450px] bg-neutral-000">
-      <Flyout {...flyOutDefaultArgs} />
-    </div>
+    <section>
+      <FlyoutStory />
+      <div className="ui-standard-container  relative z-0">
+        <div className="w-full h-[150px] bg-orange-400 flex justify-center items-center">
+          Content 1
+        </div>
+        <div className="w-full h-[150px] bg-yellow-300 flex justify-center items-center">
+          Content 2
+        </div>
+        <div className="w-full h-[150px] bg-neutral-1300 flex justify-center items-center text-neutral-000">
+          Content 3
+        </div>
+      </div>
+    </section>
   ),
   parameters: {
     docs: {
       description: {
         story:
-          "The Flyout component is positioned within a standard container and Animation is enabled",
+          "The Flyout component is positioned within a standard container and content and Animation is enabled",
       },
     },
   },

diff --git a/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap b/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components/Flyout Default smoke-test 1`] = `
-<div class="h-[450px]">
+<div>
   <nav aria-label="Main"
        data-orientation="horizontal"
        dir="ltr"
-       class="justify-center flex w-full relative"
+       class="justify-center relative z-40 ui-standard-container flex w-full"
   >
     <div style="position: relative;">
       <ul data-orientation="horizontal"
@@ -24,7 +24,7 @@ exports[`Components/Flyout Default smoke-test 1`] = `
                   data-state="closed"
                   aria-expanded="false"
                   aria-controls="radix-:r0:-content-radix-:r1:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                  class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
                   data-radix-collection-item
           >
             Products
@@ -35,7 +35,7 @@ exports[`Components/Flyout Default smoke-test 1`] = `
                   data-state="closed"
                   aria-expanded="false"
                   aria-controls="radix-:r0:-content-radix-:r2:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                  class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
                   data-radix-collection-item
           >
             Solutions
@@ -46,7 +46,7 @@ exports[`Components/Flyout Default smoke-test 1`] = `
                   data-state="closed"
                   aria-expanded="false"
                   aria-controls="radix-:r0:-content-radix-:r3:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                  class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
                   data-radix-collection-item
           >
             Company
@@ -75,75 +75,88 @@ exports[`Components/Flyout Default smoke-test 1`] = `
 `;
 
 exports[`Components/Flyout StandardContainer smoke-test 1`] = `
-<div class="ui-standard-container h-[450px]">
-  <nav aria-label="Main"
-       data-orientation="horizontal"
-       dir="ltr"
-       class="justify-center flex w-full relative"
-  >
-    <div style="position: relative;">
-      <ul data-orientation="horizontal"
-          class="flex list-none center"
-          dir="ltr"
-      >
-        <a data-radix-collection-item>
-          <a href
-             class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-          >
-            Home
+<section>
+  <div>
+    <nav aria-label="Main"
+         data-orientation="horizontal"
+         dir="ltr"
+         class="justify-center relative z-40 ui-standard-container flex w-full"
+    >
+      <div style="position: relative;">
+        <ul data-orientation="horizontal"
+            class="flex list-none center"
+            dir="ltr"
+        >
+          <a data-radix-collection-item>
+            <a href
+               class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+            >
+              Home
+            </a>
           </a>
-        </a>
-        <li>
-          <button id="radix-:r4:-trigger-radix-:r5:"
-                  data-state="closed"
-                  aria-expanded="false"
-                  aria-controls="radix-:r4:-content-radix-:r5:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-                  data-radix-collection-item
-          >
-            Products
-          </button>
-        </li>
-        <li>
-          <button id="radix-:r4:-trigger-radix-:r6:"
-                  data-state="closed"
-                  aria-expanded="false"
-                  aria-controls="radix-:r4:-content-radix-:r6:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-                  data-radix-collection-item
-          >
-            Solutions
-          </button>
-        </li>
-        <li>
-          <button id="radix-:r4:-trigger-radix-:r7:"
-                  data-state="closed"
-                  aria-expanded="false"
-                  aria-controls="radix-:r4:-content-radix-:r7:"
-                  class="group outline-none focus:outline-none select-none cursor-pointer ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-                  data-radix-collection-item
-          >
-            Company
-          </button>
-        </li>
-        <a data-radix-collection-item>
-          <a href="/pricing"
-             class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-          >
-            Pricing
+          <li>
+            <button id="radix-:r4:-trigger-radix-:r5:"
+                    data-state="closed"
+                    aria-expanded="false"
+                    aria-controls="radix-:r4:-content-radix-:r5:"
+                    class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                    data-radix-collection-item
+            >
+              Products
+            </button>
+          </li>
+          <li>
+            <button id="radix-:r4:-trigger-radix-:r6:"
+                    data-state="closed"
+                    aria-expanded="false"
+                    aria-controls="radix-:r4:-content-radix-:r6:"
+                    class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                    data-radix-collection-item
+            >
+              Solutions
+            </button>
+          </li>
+          <li>
+            <button id="radix-:r4:-trigger-radix-:r7:"
+                    data-state="closed"
+                    aria-expanded="false"
+                    aria-controls="radix-:r4:-content-radix-:r7:"
+                    class="group outline-none focus:outline-none select-none cursor-pointer relative ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+                    data-radix-collection-item
+            >
+              Company
+            </button>
+          </li>
+          <a data-radix-collection-item>
+            <a href="/pricing"
+               class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+            >
+              Pricing
+            </a>
           </a>
-        </a>
-        <a data-radix-collection-item>
-          <a href="/docs"
-             class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
-          >
-            Docs
+          <a data-radix-collection-item>
+            <a href="/docs"
+               class="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between"
+            >
+              Docs
+            </a>
           </a>
-        </a>
-      </ul>
+        </ul>
+      </div>
+      <div class="absolute left-0 top-full flex w-full justify-center">
+      </div>
+    </nav>
+  </div>
+  <div class="ui-standard-container  relative z-0">
+    <div class="w-full h-[150px] bg-orange-400 flex justify-center items-center">
+      Content 1
     </div>
-    <div class="absolute left-0 top-full flex w-full justify-center">
+    <div class="w-full h-[150px] bg-yellow-300 flex justify-center items-center">
+      Content 2
     </div>
-  </nav>
-</div>
+    <div class="w-full h-[150px] bg-neutral-1300 flex justify-center items-center text-neutral-000">
+      Content 3
+    </div>
+  </div>
+</section>
 `;