Now the menu position is automatically recalculated depending on wher…

…e the parent element is located. Deleted an unused hook.

src/components/UI/list/additional/listMenu.tsx

@@ -1,25 +1,22 @@
 import React, { Dispatch, FC } from "react";
 import { useActions } from "../../../../hooks/useActions";
-import { useMenuPositionRef } from "../../../../hooks/useMenuPositionRef";
+import { useMenuPosition } from "../../../../hooks/useMenuPosition";
 import { contentApi } from "../../../../services/contentApi";
 
 interface IListMenuProps {
   isEnabled: boolean;
   setIsEnabled: Dispatch<React.SetStateAction<boolean>>;
   listId: number;
-  menuPosition: {
-    top: number;
-    left: number;
-  };
+  menuPositionParent: React.RefObject<HTMLDivElement>;
 }
 
 const ListMenu: FC<IListMenuProps> = ({
   isEnabled,
   listId,
   setIsEnabled,
-  menuPosition,
+  menuPositionParent,
 }) => {
-  const menuRef = useMenuPositionRef(menuPosition, 110, 15);
+  const menuRef = useMenuPosition(menuPositionParent, 30, 110);
   const [deleteList] = contentApi.useFetchListsDeleteMutation();
   const { listDelete } = useActions();
   const { shareListToggleOn, editListToggleOn } = useActions();

src/components/UI/list/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useActions } from "../../../hooks/useActions";
 import { useListById } from "../../../hooks/useListById";
-import { useMenuPosition } from "../../../hooks/useMenuPosition";
 import ListMenu from "./additional/listMenu";
 import s from "./list.module.scss";
 
@@ -12,7 +11,6 @@ interface IListProps {
 
 const List: FC<IListProps> = ({ listId, clickCallback }) => {
   const dotRef = useRef<HTMLDivElement>(null);
-  const menuPosition = useMenuPosition(dotRef);
   const [isMenuOpened, SetIsMenuOpened] = useState<boolean>(false);
   const { color, listName } = useListById(listId);
   const { displayList } = useActions();
@@ -54,7 +52,7 @@ const List: FC<IListProps> = ({ listId, clickCallback }) => {
       </div>
 
       <ListMenu
-        menuPosition={menuPosition}
+        menuPositionParent={dotRef}
         isEnabled={isMenuOpened}
         listId={listId}
         setIsEnabled={SetIsMenuOpened}

src/hooks/useMenuPosition.ts

@@ -1,22 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 
 export const useMenuPosition = (
-  elementRef: React.MutableRefObject<HTMLElement | HTMLDivElement | null>
+  elementRef: React.RefObject<HTMLDivElement>,
+  offsetTop: number,
+  offsetLeft: number
 ) => {
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-  });
+  const menuRef = useRef<HTMLMenuElement>(null);
 
   useEffect(() => {
-    if (elementRef.current) {
-      const elementNode = elementRef.current;
-      setMenuPosition({
-        top: elementNode.offsetTop,
-        left: elementNode.offsetLeft,
-      });
+    if (elementRef.current && menuRef.current) {
+      const top = elementRef.current.offsetTop;
+      const left = elementRef.current.offsetLeft;
+
+      menuRef.current.style.top = top + offsetTop + "px";
+      menuRef.current.style.left = left + offsetLeft + "px";
     }
-  }, [elementRef]);
+  }, [elementRef.current?.offsetTop, elementRef.current?.offsetLeft]);
 
-  return menuPosition;
+  return menuRef;
 };