Fix app menus position

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -99,6 +99,7 @@ function BorderedApp({
           <StyledWindowMenus className="drag-to-move">
             {menus?.map((m) => (
               <BorderedAppMenu
+                appRef={appRef}
                 title={m.title}
                 items={m.items ?? []}
                 key={m.title}

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useDetectMouseDownOutside from "../../../hooks/useDetectMouseDownOutside";
 import MenuItems, { MenuItemProps } from "../../MenuItems";
 
@@ -7,18 +7,24 @@ import { StyledAppMenu } from "./styles";
 export interface BorderedAppMenuProps {
   title: string;
   items: Array<MenuItemProps>;
+  appRef: React.RefObject<HTMLDivElement>;
 }
 
-function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
+function BorderedAppMenu({ title, appRef, items }: BorderedAppMenuProps) {
   const [open, setOpen] = useState<boolean>(false);
   const elementRef = useRef<HTMLDivElement>(null);
   const position = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
   useEffect(() => {
     const rect = elementRef.current?.getBoundingClientRect();
-    // TODO: Look into where this -10 comes from
-    position.current = { x: (rect?.left ?? 0) - 10, y: rect?.height ?? 0 };
-  }, [elementRef]);
+    const appRect = appRef.current?.getBoundingClientRect();
+    if (!rect || !appRect) return;
+
+    position.current = {
+      x: (rect?.left ?? 0) - appRect.left,
+      y: rect?.height ?? 0,
+    };
+  }, [appRef, elementRef]);
 
   // Close the menu if an outside click occurs
   useDetectMouseDownOutside({