From 20d5fe57b7b57a4478f131853f8acd49be33ffdb Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Fri, 15 Dec 2023 14:58:00 -0300
Subject: [PATCH] fix(NavigationPopoverOverlay): Add portal to overlay to send
 it to the end of the document body / changed position of popover

---
 .../navigation/navigation-popover-overlay.tsx      |  6 ++++++
 src/components/navigation/navigation-popover.tsx   | 14 +++++---------
 src/components/navigation/navigation.stories.tsx   |  1 +
 3 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 src/components/navigation/navigation-popover-overlay.tsx

diff --git a/src/components/navigation/navigation-popover-overlay.tsx b/src/components/navigation/navigation-popover-overlay.tsx
new file mode 100644
index 00000000..cc88c094
--- /dev/null
+++ b/src/components/navigation/navigation-popover-overlay.tsx
@@ -0,0 +1,6 @@
+import { Popover } from "@headlessui/react";
+import * as React from "react";
+
+export const NavigationPopoverOverlay = () => (
+    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
+);
diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
index 398f8b27..e560e67d 100644
--- a/src/components/navigation/navigation-popover.tsx
+++ b/src/components/navigation/navigation-popover.tsx
@@ -3,18 +3,18 @@ import React, { useState } from "react";
 import { usePopper } from "react-popper";
 import { NavigationPopoverButton } from "./navigation-popover-button";
 import { NavigationPopoverContextProvider } from "./navigation-popover-context";
+import { NavigationPopoverOverlay } from "./navigation-popover-overlay";
 import { NavigationPopoverPanel } from "./navigation-popover-panel";
 
 export interface NavigationPopoverProps {
     children: React.ReactNode;
-    showOverlay?: boolean;
 }
 
-const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) => {
+const NavigationPopover = ({ children }: NavigationPopoverProps) => {
     const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
     const [popperElement, setPopperElement] = useState<HTMLDivElement>();
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        placement: "right-end",
+        placement: "top-start",
     });
 
     const context = {
@@ -30,17 +30,13 @@ const NavigationPopover = ({ children, showOverlay }: NavigationPopoverProps) =>
 
     return (
         <NavigationPopoverContextProvider value={context}>
-            <Popover>
-                {showOverlay && (
-                    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
-                )}
-                {children}
-            </Popover>
+            <Popover>{children}</Popover>
         </NavigationPopoverContextProvider>
     );
 };
 
 NavigationPopover.Button = NavigationPopoverButton;
 NavigationPopover.Panel = NavigationPopoverPanel;
+NavigationPopover.Overlay = NavigationPopoverOverlay;
 
 export { NavigationPopover };
diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
index 0b8857f7..bd386131 100644
--- a/src/components/navigation/navigation.stories.tsx
+++ b/src/components/navigation/navigation.stories.tsx
@@ -64,6 +64,7 @@ export const Default: Story = {
                             <Navigation.Popover.Button LeftIcon={HelpIcon}>
                                 Support
                             </Navigation.Popover.Button>
+                            <Navigation.Popover.Overlay />
                             <Navigation.Popover.Panel>
                                 <Navigation.Popover.Panel.Item>
                                     Documentation