chore: always close the nav on tab change (#2660)

Author: chdeskur

packages/fern-docs/bundle/src/components/FernLinkTab.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useDispatchSidebarAction } from "@/state/navigation";
+
+import { FernLink } from "./FernLink";
+
+export function FernLinkTab({
+  children,
+  ...props
+}: React.ComponentProps<typeof FernLink>) {
+  const dispatch = useDispatchSidebarAction();
+  return (
+    <FernLink
+      {...props}
+      onClick={() => {
+        dispatch({ type: "collapse-all" });
+      }}
+    >
+      {children}
+    </FernLink>
+  );
+}

packages/fern-docs/bundle/src/components/header/HeaderTabsList.tsx

@@ -7,9 +7,10 @@ import { TabChild, hasRedirect } from "@fern-api/fdr-sdk/navigation";
 import { cn } from "@fern-docs/components";
 import { slugToHref } from "@fern-docs/utils";
 
-import { FernLink } from "@/components/FernLink";
 import { FaIconServer } from "@/components/fa-icon-server";
 
+import { FernLinkTab } from "../FernLinkTab";
+
 export function HeaderTabsList({
   tabs,
   children,
@@ -21,22 +22,23 @@ export function HeaderTabsList({
     <Tabs.TabsList>
       {tabs.map((tab) => (
         <Tabs.TabsTrigger key={tab.id} value={tab.id} asChild>
-          <FernLink
+          <FernLinkTab
             className={cn({ "opacity-50": tab.type !== "link" && tab.hidden })}
             href={
               tab.type === "link"
                 ? tab.url
                 : slugToHref(hasRedirect(tab) ? tab.pointsTo : tab.slug)
             }
             scroll={true}
+            id={tab.id}
           >
             {tab.type !== "link" && tab.authed ? (
               <Lock />
             ) : (
               tab.icon && <FaIconServer icon={tab.icon} />
             )}
             <span className="truncate">{tab.title}</span>
-          </FernLink>
+          </FernLinkTab>
         </Tabs.TabsTrigger>
       ))}
       {children}

packages/fern-docs/bundle/src/components/sidebar/SidebarTabsList.tsx

@@ -7,7 +7,7 @@ import { TabChild, hasRedirect } from "@fern-api/fdr-sdk/navigation";
 import { cn } from "@fern-docs/components";
 import { slugToHref } from "@fern-docs/utils";
 
-import { FernLink } from "@/components/FernLink";
+import { FernLinkTab } from "@/components/FernLinkTab";
 import { FaIconServer } from "@/components/fa-icon-server";
 
 export function SidebarTabsList({
@@ -21,7 +21,7 @@ export function SidebarTabsList({
     <Tabs.TabsList className="-my-2">
       {tabs.map((tab) => (
         <Tabs.TabsTrigger key={tab.id} value={tab.id} asChild>
-          <FernLink
+          <FernLinkTab
             className={cn(
               "min-h-8 lg:min-h-9",
               "hover:text-(color:--accent) rounded-2 group flex min-w-0 flex-1 select-none items-center justify-start py-2 text-base lg:px-3 lg:text-sm",
@@ -51,7 +51,7 @@ export function SidebarTabsList({
             <span className="truncate font-medium group-data-[state=active]:font-semibold">
               {tab.title}
             </span>
-          </FernLink>
+          </FernLinkTab>
         </Tabs.TabsTrigger>
       ))}
       {children}