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

…e end of the document body / changed position of popover

src/components/navigation/navigation-popover-overlay.tsx

@@ -0,0 +1,10 @@
+import { Popover } from "@headlessui/react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+export const NavigationPopoverOverlay = () => {
+    return createPortal(
+        <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />,
+        document.body
+    );
+};

src/components/navigation/navigation-popover.tsx

@@ -3,6 +3,7 @@ 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 {
@@ -14,7 +15,7 @@ const NavigationPopover = ({ children, showOverlay }: 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 = {
@@ -31,9 +32,7 @@ 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" />
-                )}
+                {showOverlay && <NavigationPopoverOverlay />}
                 {children}
             </Popover>
         </NavigationPopoverContextProvider>