From 2856e23a4a7199219bade4f8cbc625935e99ce2f Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 12:50:11 -0400
Subject: [PATCH] fixed the dropdown

---
 components/Checkbox.tsx         |   4 +-
 components/ClickAwayHandler.tsx |  12 +++-
 components/CollectionCard.tsx   |   4 +-
 components/Dropdown.tsx         | 109 ++++++++++++++++++++++++--------
 components/LinkCard.tsx         |  13 ++--
 components/Modal/index.tsx      |   2 +-
 components/ProfilePhoto.tsx     |   8 ++-
 components/SettingsSidebar.tsx  |   4 +-
 components/Sidebar.tsx          |   4 +-
 components/SubmitButton.tsx     |   2 +-
 components/TextInput.tsx        |   4 +-
 11 files changed, 120 insertions(+), 46 deletions(-)

diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index 6c661c5..d54c08b 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -11,7 +11,9 @@ type Props = {
 
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label className={`cursor-pointer flex items-center gap-2 ${className}`}>
+    <label
+      className={`cursor-pointer flex items-center gap-2 ${className || ""}`}
+    >
       <input
         type="checkbox"
         checked={state}
diff --git a/components/ClickAwayHandler.tsx b/components/ClickAwayHandler.tsx
index 090932a..63378a1 100644
--- a/components/ClickAwayHandler.tsx
+++ b/components/ClickAwayHandler.tsx
@@ -5,6 +5,7 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   style?: React.CSSProperties;
+  onMount?: (rect: DOMRect) => void;
 };
 
 function useOutsideAlerter(
@@ -32,10 +33,19 @@ export default function ClickAwayHandler({
   onClickOutside,
   className,
   style,
+  onMount,
 }: Props) {
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
   useOutsideAlerter(wrapperRef, onClickOutside);
 
+  useEffect(() => {
+    if (wrapperRef.current && onMount) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      onMount(rect); // Pass the bounding rectangle to the parent
+    }
+  }, []);
+
   return (
     <div ref={wrapperRef} className={className} style={style}>
       {children}
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index a67d48d..7d0442e 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -40,7 +40,9 @@ export default function CollectionCard({ collection, className }: Props) {
           theme === "dark" ? "#262626" : "#f3f4f6"
         } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
       }}
-      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
+      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+        className || ""
+      }`}
     >
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 49f1d39..aac1ad6 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, useEffect, useState } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 
 type MenuItem =
@@ -19,42 +19,95 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  points: { x: number; y: number };
   style?: React.CSSProperties;
+  width: number; // in rem
 };
 
 export default function Dropdown({
-  style,
+  points,
   onClickOutside,
   className,
   items,
+  width,
 }: 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`}
-    >
-      {items.map((e, i) => {
-        const inner = e && (
-          <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
-            </div>
-          </div>
-        );
+  const [pos, setPos] = useState<{ x: number; y: number }>();
+  const [dropdownHeight, setDropdownHeight] = useState<number>();
 
-        return e && e.href ? (
-          <Link key={i} href={e.href}>
-            {inner}
-          </Link>
-        ) : (
-          e && (
-            <div key={i} onClick={e.onClick}>
-              {inner}
+  function convertRemToPixels(rem: number) {
+    return (
+      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+    );
+  }
+
+  useEffect(() => {
+    const dropdownWidth = convertRemToPixels(width);
+
+    let finalX = points.x;
+    let finalY = points.y;
+
+    // Check for x-axis overflow (left side)
+    if (points.x + dropdownWidth > window.innerWidth) {
+      finalX = points.x - dropdownWidth;
+    }
+
+    // Check for y-axis overflow (bottom side)
+    if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
+      finalY =
+        window.innerHeight - (dropdownHeight + (window.innerHeight - points.y));
+    }
+
+    setPos({ x: finalX, y: finalY });
+  }, [points, width, dropdownHeight]);
+
+  useEffect(() => {
+    const dropdownWidth = convertRemToPixels(width);
+
+    if (points.x + dropdownWidth > window.innerWidth) {
+      setPos({ x: points.x - dropdownWidth, y: points.y });
+    } else setPos(points);
+  }, [points, width]);
+
+  return (
+    pos && (
+      <ClickAwayHandler
+        onMount={(e) => {
+          setDropdownHeight(e.height);
+        }}
+        style={{
+          position: "fixed",
+          top: `${pos?.y}px`,
+          left: `${pos?.x}px`,
+        }}
+        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 w-[${width}rem]`}
+      >
+        {items.map((e, i) => {
+          const inner = e && (
+            <div className="cursor-pointer rounded-md">
+              <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
+                <p className="text-black dark:text-white select-none">
+                  {e.name}
+                </p>
+              </div>
             </div>
-          )
-        );
-      })}
-    </ClickAwayHandler>
+          );
+
+          return e && e.href ? (
+            <Link key={i} href={e.href}>
+              {inner}
+            </Link>
+          ) : (
+            e && (
+              <div key={i} onClick={e.onClick}>
+                {inner}
+              </div>
+            )
+          );
+        })}
+      </ClickAwayHandler>
+    )
   );
 }
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index d037f7f..5809025 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -132,14 +132,15 @@ export default function LinkCard({ link, count, className }: Props) {
 
   return (
     <div
-      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
+      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+        className || ""
+      }`}
     >
       {(permissions === true ||
         permissions?.canUpdate ||
         permissions?.canDelete) && (
         <div
           onClick={(e) => {
-            console.log(expandDropdown);
             setExpandDropdown({ x: e.clientX, y: e.clientY });
           }}
           id={"expand-dropdown" + link.id}
@@ -228,11 +229,7 @@ export default function LinkCard({ link, count, className }: Props) {
       </div>
       {expandDropdown ? (
         <Dropdown
-          style={{
-            position: "fixed",
-            top: `${expandDropdown.y}px`,
-            left: `${expandDropdown.x}px`,
-          }}
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -278,7 +275,7 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="w-40"
+          width={10}
         />
       ) : null}
     </div>
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index b52feff..cd4b04e 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -14,7 +14,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`m-auto ${className}`}
+        className={`m-auto ${className || ""}`}
       >
         <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index a96e8ba..8575d6d 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -24,7 +24,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
 
   return !image ? (
     <div
-      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
+        className || ""
+      }`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
@@ -36,7 +38,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
       width={112}
       priority={priority}
       draggable={false}
-      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+        className || ""
+      }`}
     />
   );
 }
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index 128af2b..d5b072b 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -32,7 +32,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+        className || ""
+      }`}
     >
       <div className="flex flex-col gap-1">
         <Link href="/settings/account">
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index eb8cfad..7d2c614 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,7 +51,9 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
+        className || ""
+      }`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index 6ee0a78..fbcd8b8 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -25,7 +25,7 @@ export default function SubmitButton({
         loading
           ? "bg-sky-600 cursor-auto"
           : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className}`}
+      } ${className || ""}`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
index a075757..44587e7 100644
--- a/components/TextInput.tsx
+++ b/components/TextInput.tsx
@@ -27,7 +27,9 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${className}`}
+      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
+        className || ""
+      }`}
     />
   );
 }