Fix context menu positioning

src/components/ContextMenu/index.tsx

@@ -10,49 +10,38 @@ type ContextMenuProps = {
 
 const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
   const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const parentComponentRef = useRef<HTMLDivElement>();
 
   useEffect(() => {
-    const wrapper = ref.current;
+    parentComponentRef.current = document.querySelector(`#${component}`) as HTMLDivElement;
 
     const openMenu = () => setOpen(true);
     const closeMenu = () => setOpen(false);
 
-    (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
+    parentComponentRef.current?.addEventListener(
       'mouseenter',
       openMenu
     );
-    (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
+    parentComponentRef.current?.addEventListener(
       'mouseleave',
       closeMenu
     );
 
     return () => {
-      (
+      parentComponentRef.current?.removeEventListener('mouseenter', openMenu);
-        document.querySelector(`#${component}`) as HTMLElement
+      parentComponentRef.current?.removeEventListener('mouseleave', closeMenu);
-      )?.removeEventListener('mouseenter', openMenu);
-      wrapper?.removeEventListener('mouseleave', closeMenu);
     };
-
+  }, []);
-    // eslint-disable-next-line
-  }, [ref.current]);
 
   return (
     <Wrapper
-      ref={ref}
       className={className}
-      top={
+      top={(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().top + 30}
-        (document.querySelector(`#${component}`) as HTMLElement)?.offsetTop + 30
+      left={(parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().left + 10}
-      }
-      left={
-        (document.querySelector(`#${component}`) as HTMLElement)?.offsetLeft +
-        10
-      }
     >
       {open && (
         <ul>
           {items.map(({ label, action }) => (
-            // eslint-disable-next-line
             <li
               onClick={() => {
                 if (action) {

src/components/Sidebar/index.tsx

@@ -153,7 +153,7 @@ const Sidebar = () => {
               ))}
             {templates &&
               templates.map((template, index) => (
-                <Box marginBottom='20px' key={template.id} position='relative'>
+                <Box marginBottom='20px' key={template.id}>
                   <div id={`template-${template.id}`}>
                     <SidebarItem
                       color={role}