tweak styling, remove root override, add slotting for product dropdown

Author: Sarah Bawabe

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

@@ -0,0 +1,38 @@
+import "server-only";
+
+import { FernNavigation } from "@fern-api/fdr-sdk";
+import { slugjoin } from "@fern-api/fdr-sdk/navigation";
+
+import { getFernToken } from "@/app/fern-token";
+import { ProductDropdown } from "@/components/header/ProductDropdown";
+import { createCachedDocsLoader } from "@/server/docs-loader";
+
+export default async function VersionSelectPage({
+  params,
+}: {
+  params: Promise<{ host: string; domain: string; slug: string }>;
+}) {
+  const { host, domain, slug } = await params;
+  const loader = await createCachedDocsLoader(
+    host,
+    domain,
+    await getFernToken()
+  );
+
+  const rootPromise = loader.getRoot();
+
+  // preload:
+  await loader.getLayout();
+  await loader.getAuthState();
+  await loader.getEdgeFlags();
+
+  const foundNode = FernNavigation.utils.findNode(
+    await rootPromise,
+    slugjoin(slug)
+  );
+  if (foundNode.type !== "found") {
+    return null;
+  }
+
+  return <ProductDropdown loader={loader} />;
+}

packages/fern-docs/bundle/src/app/[host]/[domain]/dynamic/layout.tsx

@@ -10,6 +10,7 @@ export default async function Layout({
   headertabs,
   sidebar,
   versionSelect,
+  productSelect,
   logo,
   explorer,
 }: {
@@ -18,6 +19,7 @@ export default async function Layout({
   headertabs: React.ReactNode;
   sidebar: React.ReactNode;
   versionSelect: React.ReactNode;
+  productSelect: React.ReactNode;
   logo: React.ReactNode;
   explorer: React.ReactNode;
 }) {
@@ -30,6 +32,7 @@ export default async function Layout({
       loader={loader}
       headertabs={headertabs}
       versionSelect={versionSelect}
+      productSelect={productSelect}
       sidebar={sidebar}
       logo={logo}
     >

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

@@ -0,0 +1,38 @@
+import "server-only";
+
+import { FernNavigation } from "@fern-api/fdr-sdk";
+import { slugjoin } from "@fern-api/fdr-sdk/navigation";
+
+import { getFernToken } from "@/app/fern-token";
+import { ProductDropdown } from "@/components/header/ProductDropdown";
+import { createCachedDocsLoader } from "@/server/docs-loader";
+
+export default async function VersionSelectPage({
+  params,
+}: {
+  params: Promise<{ host: string; domain: string; slug: string }>;
+}) {
+  const { host, domain, slug } = await params;
+  const loader = await createCachedDocsLoader(
+    host,
+    domain,
+    await getFernToken()
+  );
+
+  const rootPromise = loader.getRoot();
+
+  // preload:
+  await loader.getLayout();
+  await loader.getAuthState();
+  await loader.getEdgeFlags();
+
+  const foundNode = FernNavigation.utils.findNode(
+    await rootPromise,
+    slugjoin(slug)
+  );
+  if (foundNode.type !== "found") {
+    return null;
+  }
+
+  return <ProductDropdown loader={loader} />;
+}

packages/fern-docs/bundle/src/app/[host]/[domain]/static/layout.tsx

@@ -9,6 +9,7 @@ export default async function Layout({
   headertabs,
   sidebar,
   versionSelect,
+  productSelect,
   logo,
   explorer,
 }: {
@@ -17,6 +18,7 @@ export default async function Layout({
   headertabs: React.ReactNode;
   sidebar: React.ReactNode;
   versionSelect: React.ReactNode;
+  productSelect: React.ReactNode;
   logo: React.ReactNode;
   explorer: React.ReactNode;
 }) {
@@ -27,6 +29,7 @@ export default async function Layout({
       loader={loader}
       headertabs={headertabs}
       versionSelect={versionSelect}
+      productSelect={productSelect}
       sidebar={sidebar}
       logo={logo}
     >

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

@@ -41,7 +41,7 @@ export function HeaderContent({
     >
       <div className="fern-header-logo-container">
         <div className="flex items-center gap-2">
-          <div className="flex items-start gap-2">
+          <div className="flex items-center gap-2 lg:items-start">
             {logo}
             {productSelect}
           </div>

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

@@ -85,10 +85,10 @@ export function ProductDropdownClient({
       side="bottom"
       align="start"
     >
-      <button className="rounded-3/2 hover:bg-(color:--grayscale-a4) flex cursor-pointer items-center gap-1 self-baseline px-2 transition-[background-color]">
-        {currentProduct?.title}
+      <div className="product-dropdown-trigger rounded-3/2 hover:bg-(color:--grayscale-a4) flex cursor-pointer items-center gap-1 self-baseline px-2 transition-[background-color]">
+        <p className="product-item-title">{currentProduct?.title}</p>
         <ChevronDown className="size-icon transition-transform data-[state=open]:rotate-180" />
-      </button>
+      </div>
     </FernProductDropdown>
   );
 

packages/fern-docs/bundle/src/components/shared-layout.tsx

@@ -13,21 +13,22 @@ import { DocsLoader } from "@/server/docs-loader";
 import { isLocal } from "@/server/isLocal";
 import { createCachedMdxSerializer } from "@/server/mdx-serializer";
 
-import { ProductDropdown } from "./header/ProductDropdown";
 import { LoginButton } from "./login-button";
 
 export default async function SharedLayout({
   children,
   headertabs,
   sidebar,
   versionSelect,
+  productSelect,
   loader,
   logo,
 }: {
   children: React.ReactNode;
   headertabs: React.ReactNode;
   sidebar?: React.ReactNode;
   versionSelect: React.ReactNode;
+  productSelect: React.ReactNode;
   loader: DocsLoader;
   logo: React.ReactNode;
 }) {
@@ -85,9 +86,7 @@ export default async function SharedLayout({
             <React.Suspense fallback={null}>{versionSelect}</React.Suspense>
           }
           productSelect={
-            <React.Suspense fallback={null}>
-              <ProductDropdown loader={loader} />
-            </React.Suspense>
+            <React.Suspense fallback={null}>{productSelect}</React.Suspense>
           }
           showSearchBar={layout.searchbarPlacement === "HEADER"}
           navbarLinks={<NavbarLinks loader={loader} />}

packages/fern-docs/bundle/src/server/docs-loader.ts

@@ -60,7 +60,6 @@ import { FernFonts, generateFonts } from "./generateFonts";
 import { getDocsUrlMetadata } from "./getDocsUrlMetadata";
 import { isLocal } from "./isLocal";
 import { loadWithUrl as uncachedLoadWithUrl } from "./loadWithUrl";
-import { MOCK_DATA_WITH_PRODUCTS } from "./mock-data";
 import { postToEngineeringNotifs } from "./slack";
 import { FernColorTheme, FernLayoutConfig, FileData } from "./types";
 import { cleanBasePath } from "./utils/clean-base-path";
@@ -597,9 +596,6 @@ const getRoot = async (
     root = pruneWithAuthState(authState, authConfig, root);
   }
 
-  // TODO: remove this to restore the real root. this overrides to show the mock root for testing
-  root = MOCK_DATA_WITH_PRODUCTS;
-
   FernNavigation.utils.mutableUpdatePointsTo(root);
 
   return root;

packages/fern-docs/components/src/FernDropdown.scss

@@ -20,16 +20,25 @@
     }
   }
 
+  /* Styles for making the product dropdown trigger look like an icon button on mobile. */
+  .product-dropdown-trigger {
+    @apply py-2 lg:py-0;
+    @apply rounded-2 bg-(color:--grayscale-a2) lg:bg-transparent;
+  }
+  .product-item-title {
+    @apply hidden lg:block;
+  }
+
   /* We define the styles for the product dropdown item outside of the .fern-dropdown class since it is reused within
   multiple dropdowns. */
   .fern-product-item {
-    @apply rounded-3/2 flex cursor-pointer items-center gap-2 border-none px-2 py-1;
-    @apply max-w-[min(300px,100%)];
+    @apply rounded-3/2 flex cursor-pointer items-center gap-2 border-none py-1 pl-1 pr-4;
+    @apply w-full;
     @apply transition-all duration-200 ease-in-out;
 
     .fern-product-item-icon {
       @apply rounded-3/2 border-(color:--grayscale-a9) border;
-      @apply m-1 flex h-[42px] w-[42px] shrink-0 items-center justify-center p-1;
+      @apply m-1 flex h-[56px] w-[56px] shrink-0 items-center justify-center p-1;
       svg {
         @apply block h-[60%] w-[60%];
       }

packages/fern-docs/components/src/FernProductItem.tsx

@@ -25,8 +25,8 @@ export function FernProductItem({
     >
       <div className="fern-product-item-icon">{option.icon}</div>
 
-      <div className="flex flex-col">
-        <p className="text-sm font-medium leading-tight">{option.title}</p>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-bold leading-tight">{option.title}</p>
         {option.subtitle ? (
           <p className="text-(color:--grayscale-a9) text-sm leading-tight">
             {option.subtitle}