Add open in new tab for custom links (#2568)

onyx-dot-app · Sep 26, 2024 · 1f61447 · 1f61447
1 parent deee2b3
commit 1f61447
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
@@ -23,13 +23,15 @@ interface DropdownOptionProps {
   onClick?: () => void;
   icon: React.ReactNode;
   label: string;
+  openInNewTab?: boolean;
 }
 
 const DropdownOption: React.FC<DropdownOptionProps> = ({
   href,
   onClick,
   icon,
   label,
+  openInNewTab,
 }) => {
   const content = (
     <div className="flex py-3 px-4 cursor-pointer rounded hover:bg-hover-light">
@@ -38,11 +40,19 @@ const DropdownOption: React.FC<DropdownOptionProps> = ({
     </div>
   );
 
-  return href ? (
-    <Link href={href}>{content}</Link>
-  ) : (
-    <div onClick={onClick}>{content}</div>
-  );
+  if (href) {
+    return (
+      <Link
+        href={href}
+        target={openInNewTab ? "_blank" : undefined}
+        rel={openInNewTab ? "noopener noreferrer" : undefined}
+      >
+        {content}
+      </Link>
+    );
+  } else {
+    return <div onClick={onClick}>{content}</div>;
+  }
 };
 
 export function UserDropdown({
@@ -173,6 +183,7 @@ export function UserDropdown({
                   )
                 }
                 label={item.title}
+                openInNewTab
               />
             ))}