sidebar links prototype

Author: oscartbeaumont

app/docs/SidebarItem.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { CratesIoLogo, NpmLogo } from "@/lib/logos";
+import { type SidebarComponents } from "fumadocs-ui/layouts/docs/shared";
+import { SidebarItem } from "fumadocs-ui/layouts/docs/sidebar";
+
+export const components: Partial<SidebarComponents> = {
+  Item: ({ item }) => {
+    // TODO: generalise this and configure it for all revelant links
+    if (item.url === "/docs/rspc/client/vanilla") {
+      return (
+        <div className="flex w-full">
+          <SidebarItem
+            key={item.url}
+            href={item.url}
+            external={item.external}
+            icon={item.icon}
+            className="w-full"
+          >
+            {item.name}
+          </SidebarItem>
+          <SidebarItem
+            key={item.url + "-npm"}
+            href="https://www.npmjs.com/package/@rspc/client"
+            external={item.external}
+            className="ml-1"
+          >
+            <NpmLogo />
+          </SidebarItem>
+        </div>
+      );
+    } else if (item.url === "/docs/rspc/client/rust") {
+      return (
+        <div className="flex w-full">
+          <SidebarItem
+            key={item.url}
+            href={item.url}
+            external={item.external}
+            icon={item.icon}
+            className="w-full"
+          >
+            {item.name}
+          </SidebarItem>
+          <SidebarItem
+            key={item.url + "-npm"}
+            href="https://docs.rs/rspc"
+            external={item.external}
+            className="ml-1"
+          >
+            <CratesIoLogo />
+          </SidebarItem>
+        </div>
+      );
+    }
+
+    return (
+      <SidebarItem
+        key={item.url}
+        href={item.url}
+        external={item.external}
+        icon={item.icon}
+      >
+        {item.name}
+      </SidebarItem>
+    );
+  },
+};

app/docs/layout.tsx

@@ -2,10 +2,17 @@ import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
 import { source } from "@/lib/source";
+import { components } from "./SidebarItem";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={source.pageTree} {...baseOptions}>
+    <DocsLayout
+      tree={source.pageTree}
+      {...baseOptions}
+      sidebar={{
+        components,
+      }}
+    >
       {children}
     </DocsLayout>
   );

package.json

@@ -28,5 +28,10 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "fumadocs-ui": "patches/fumadocs-ui.patch"
+    }
   }
 }

patches/fumadocs-ui.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/layouts/docs/sidebar.js b/dist/layouts/docs/sidebar.js
+index ab856d6e6a1e17f6c26fcf9b77c8e106761214c3..983a27c6a60ff3b24aba3e92a7548d52aa1c91b3 100644
+--- a/dist/layouts/docs/sidebar.js
++++ b/dist/layouts/docs/sidebar.js
+@@ -85,7 +85,7 @@ export function SidebarItem({ icon, ...props }) {
+     const pathname = usePathname();
+     const active = props.href !== undefined && isActive(props.href, pathname, false);
+     const { prefetch } = useInternalContext();
+-    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active })), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
++    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
+ }
+ export function SidebarFolder({ defaultOpen = false, ...props }) {
+     const [open, setOpen] = useState(defaultOpen);