ui(docs): implement toggle style for product switcher (#6114)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Catherine Deskur <[email protected]>

Author: devin-ai-integration[bot]

packages/fern-docs/bundle/src/app/[host]/[domain]/static/@productSelect/[slug]/page.tsx

@@ -18,12 +18,12 @@ export default async function ProductSelectPage({
     const { host, domain, slug } = await params;
     const loader = await createCachedDocsLoader(host, domain, await getFernToken());
 
-    // preload:
-    const [layout, _auth, _flags, root] = await Promise.all([
+    const [layout, _auth, _flags, root, theme] = await Promise.all([
         loader.getLayout(),
         loader.getAuthState(),
         loader.getEdgeFlags(),
-        loader.getRoot()
+        loader.getRoot(),
+        loader.getTheme()
     ]);
     const useDenseLayout = layout.isHeaderDisabled;
 
@@ -34,5 +34,12 @@ export default async function ProductSelectPage({
         return null;
     }
 
-    return <ProductDropdown loader={loader} fallbackProduct={fallbackProduct} useDenseLayout={useDenseLayout} />;
+    return (
+        <ProductDropdown
+            loader={loader}
+            fallbackProduct={fallbackProduct}
+            useDenseLayout={useDenseLayout}
+            productSwitcherTheme={theme?.productSwitcher}
+        />
+    );
 }

packages/fern-docs/components/src/header/ProductDropdown.tsx

@@ -1,6 +1,7 @@
 import type { DocsLoader } from "@fern-api/docs-server/docs-loader";
 import { createFileResolver } from "@fern-api/docs-server/file-resolver";
 import { getProducts } from "@fern-api/docs-server/handle-node-fallbacks";
+import type { ProductSwitcherThemeConfig } from "@fern-api/docs-utils/types/theme-config";
 import type { FernNavigation } from "@fern-api/fdr-sdk";
 import Image from "next/image";
 import { processIcon } from "../processIcon";
@@ -13,11 +14,13 @@ export declare namespace ProductDropdown {
 export async function ProductDropdown({
     loader,
     fallbackProduct,
-    useDenseLayout = false
+    useDenseLayout = false,
+    productSwitcherTheme
 }: {
     loader: DocsLoader;
     fallbackProduct: FernNavigation.ProductNode;
     useDenseLayout?: boolean;
+    productSwitcherTheme?: ProductSwitcherThemeConfig;
 }) {
     const root = await loader.getRoot();
     if (root.child.type !== "productgroup") {
@@ -71,6 +74,7 @@ export async function ProductDropdown({
             fallbackProduct={fallbackProduct}
             useDenseLayout={useDenseLayout}
             lang={lang}
+            productSwitcherTheme={productSwitcherTheme}
         />
     );
 }

packages/fern-docs/components/src/header/ProductDropdownClient.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { slugToHref } from "@fern-api/docs-utils";
+import type { ProductSwitcherThemeConfig } from "@fern-api/docs-utils/types/theme-config";
 import type { FernNavigation } from "@fern-api/fdr-sdk";
 import { useIsDesktop } from "@fern-ui/react-commons";
 import { ChevronDown, ChevronsUpDown } from "lucide-react";
 import { cn } from "../cn";
 import { FernDropdown } from "../FernDropdown";
+import { FernLink } from "../FernLink";
 import { FernSelectionItem } from "../FernSelectionItem";
 import { useCurrentProductId, useCurrentProductSlug } from "../state/navigation";
 
@@ -26,12 +28,14 @@ export function ProductDropdownClient({
     products,
     fallbackProduct,
     useDenseLayout = false,
-    lang
+    lang,
+    productSwitcherTheme
 }: {
     products: ProductDropdownItem[];
     fallbackProduct: FernNavigation.ProductNode;
     useDenseLayout?: boolean;
     lang: string;
+    productSwitcherTheme?: ProductSwitcherThemeConfig;
 }) {
     const isDesktop = useIsDesktop();
     const currentProductId = useCurrentProductId();
@@ -46,6 +50,38 @@ export function ProductDropdownClient({
         return null;
     }
 
+    const isToggleTheme = productSwitcherTheme === "toggle";
+
+    if (isToggleTheme && isDesktop) {
+        return (
+            <div className="fern-product-selector" data-testid="product-toggle">
+                {products.map((product) => {
+                    const productHref =
+                        product.href ??
+                        slugToHref(
+                            pickProductSlug({
+                                currentProductSlug,
+                                defaultSlug: product.defaultSlug,
+                                slug: product.slug ?? ""
+                            })
+                        );
+                    const isActive = product.productId === currentProductId;
+                    return (
+                        <FernLink
+                            key={product.productId}
+                            href={productHref}
+                            target={product.target}
+                            className="product-dropdown-trigger"
+                            data-active={isActive}
+                        >
+                            {product.title}
+                        </FernLink>
+                    );
+                })}
+            </div>
+        );
+    }
+
     return (
         <FernDropdown
             value={currentProductId}