fix: clicking sidebar link should not open in a new tab if relative u…

…rl (#1208)
fern-api · Jul 26, 2024 · 4d7e236 · 4d7e236
1 parent 003c538
commit 4d7e236
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/ui/app/src/components/FernLink.tsx b/packages/ui/app/src/components/FernLink.tsx
@@ -1,8 +1,9 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { useAtomValue } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import Link from "next/link";
 import { ReactElement, forwardRef, useEffect, useState, type ComponentProps } from "react";
 import { format, parse, resolve, type UrlObject } from "url";
+import { useMemoOne } from "use-memo-one";
 import { SLUG_ATOM, useDomain } from "../atoms";
 
 interface FernLinkProps extends ComponentProps<typeof Link> {
@@ -34,8 +35,12 @@ export const FernLink = forwardRef<HTMLAnchorElement, FernLinkProps>(
 FernLink.displayName = "FernLink";
 
 const FernRelativeLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>((props, ref) => {
-    const selectedSlug = useAtomValue(SLUG_ATOM);
-    const href = resolveRelativeUrl(`/${selectedSlug}`, formatUrlString(props.href));
+    const href = useAtomValue(
+        useMemoOne(
+            () => atom((get) => resolveRelativeUrl(`/${get(SLUG_ATOM)}`, formatUrlString(props.href))),
+            [props.href],
+        ),
+    );
     return <Link ref={ref} {...props} href={href} />;
 });
 

diff --git a/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarLinkNode.tsx
@@ -15,9 +15,8 @@ export function SidebarLinkNode({ node, depth, className }: SidebarLinkNodeProps
             className={className}
             depth={Math.max(depth - 1, 0)}
             title={node.title}
-            rightElement={<ExternalLinkIcon />}
+            rightElement={node.url.startsWith("http") && <ExternalLinkIcon />}
             href={node.url}
-            target={"_blank"}
             hidden={false}
         />
     );