fix(NavigationPopoverOverlay): Add portal to overlay to send it to th…

…e end of the document body / changed position of popover
abusix · Dec 15, 2023 · ac8a89a · ac8a89a
1 parent 47bba88
commit ac8a89a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/components/navigation/navigation-popover-overlay.tsx 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
@@ -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: "bottom-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
@@ -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