[WIP] dropdown bug

components/ClickAwayHandler.tsx

@@ -4,6 +4,7 @@ type Props = {
   children: ReactNode;
   onClickOutside: Function;
   className?: string;
+  style?: React.CSSProperties;
 };
 
 function useOutsideAlerter(
@@ -30,12 +31,13 @@ export default function ClickAwayHandler({
   children,
   onClickOutside,
   className,
+  style,
 }: Props) {
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef, onClickOutside);
 
   return (
-    <div ref={wrapperRef} className={className}>
+    <div ref={wrapperRef} className={className} style={style}>
       {children}
     </div>
   );

components/Dropdown.tsx

@@ -19,11 +19,18 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  style?: React.CSSProperties;
 };
 
-export default function Dropdown({ onClickOutside, className, items }: Props) {
+export default function Dropdown({
+  style,
+  onClickOutside,
+  className,
+  items,
+}: Props) {
   return (
     <ClickAwayHandler
+      style={style}
       onClickOutside={onClickOutside}
       className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
     >

components/LinkCard.tsx

@@ -139,7 +139,7 @@ export default function LinkCard({ link, count, className }: Props) {
         permissions?.canDelete) && (
         <div
           onClick={(e) => {
-            console.log();
+            console.log(expandDropdown);
             setExpandDropdown({ x: e.clientX, y: e.clientY });
           }}
           id={"expand-dropdown" + link.id}
@@ -228,6 +228,11 @@ export default function LinkCard({ link, count, className }: Props) {
       </div>
       {expandDropdown ? (
         <Dropdown
+          style={{
+            position: "fixed",
+            top: `${expandDropdown.y}px`,
+            left: `${expandDropdown.x}px`,
+          }}
           items={[
             permissions === true
               ? {
@@ -273,7 +278,7 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-12 right-5 w-40"
+          className="w-40"
         />
       ) : null}
     </div>