From 1f14306ec0eeea5feaabdfbb2df0faeff68da572 Mon Sep 17 00:00:00 2001
From: Anthony Shew <anthonyshew@gmail.com>
Date: Thu, 4 Jun 2026 07:42:41 -0600
Subject: [PATCH] fix: Highlight active docs sidebar item

---
 apps/docs/components/geistdocs/sidebar.tsx | 38 ++++++++++++++++------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/docs/components/geistdocs/sidebar.tsx b/apps/docs/components/geistdocs/sidebar.tsx
index a8a86f98a11be..6db7eb27f90b0 100644
--- a/apps/docs/components/geistdocs/sidebar.tsx
+++ b/apps/docs/components/geistdocs/sidebar.tsx
@@ -17,6 +17,7 @@ import {
   SidebarSeparator
 } from "fumadocs-ui/components/sidebar/base";
 import type { SidebarPageTreeComponents } from "fumadocs-ui/components/sidebar/page-tree";
+import { usePathname } from "fumadocs-core/framework";
 import { useTreeContext, useTreePath } from "fumadocs-ui/contexts/tree";
 import { SiGithub } from "@icons-pack/react-simple-icons";
 import { ExternalLinkIcon } from "lucide-react";
@@ -34,6 +35,16 @@ import { cn } from "@/lib/utils";
 import { SearchButton } from "./search";
 import { VersionWarning } from "@/components/version-warning";
 
+const normalizePath = (path: string) => {
+  const normalized = path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+  const docsPathStart = normalized.indexOf("/docs");
+
+  return docsPathStart > 0 ? normalized.slice(docsPathStart) : normalized;
+};
+
+const isActive = (href: string, pathname: string) =>
+  normalizePath(href) === normalizePath(pathname);
+
 export const Sidebar: DocsSlots["sidebar"]["root"] = ({
   className,
   components
@@ -147,6 +158,7 @@ export const Folder: SidebarPageTreeComponents["Folder"] = ({
   item
 }) => {
   const path = useTreePath();
+  const pathname = usePathname();
   const defaultOpen = item.defaultOpen ?? path.includes(item);
 
   return (
@@ -156,6 +168,7 @@ export const Folder: SidebarPageTreeComponents["Folder"] = ({
           className="flex items-center gap-2 text-pretty py-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground data-[active=true]:text-foreground [&_svg]:size-3.5"
           external={item.index.external}
           href={item.index.url}
+          active={isActive(item.index.url, pathname)}
         >
           {item.icon}
           {item.name}
@@ -171,16 +184,21 @@ export const Folder: SidebarPageTreeComponents["Folder"] = ({
   );
 };
 
-export const Item: SidebarPageTreeComponents["Item"] = ({ item }) => (
-  <SidebarItem
-    className="block w-full truncate text-pretty py-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground data-[active=true]:text-foreground"
-    external={item.external}
-    href={item.url}
-    icon={item.icon}
-  >
-    {item.name}
-  </SidebarItem>
-);
+export const Item: SidebarPageTreeComponents["Item"] = ({ item }) => {
+  const pathname = usePathname();
+
+  return (
+    <SidebarItem
+      active={isActive(item.url, pathname)}
+      className="block w-full truncate text-pretty py-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground data-[active=true]:text-foreground"
+      external={item.external}
+      href={item.url}
+      icon={item.icon}
+    >
+      {item.name}
+    </SidebarItem>
+  );
+};
 
 export const Separator: SidebarPageTreeComponents["Separator"] = ({ item }) => (
   <SidebarSeparator className="mt-4 mb-2 flex items-center gap-2 px-0 font-medium text-sm first-child:mt-0">