Update sidebar.tsx

Author: haydenbleasel

apps/docs/components/geistdocs/sidebar.tsx

@@ -1,11 +1,5 @@
 "use client";
 
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@repo/shadcn-ui/components/ui/collapsible";
-import { cn } from "@repo/shadcn-ui/lib/utils";
 import type {
   Folder as FolderType,
   Item as ItemType,
@@ -15,33 +9,63 @@ import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
 
 type FolderProps = {
   item: FolderType;
   level: number;
   children: ReactNode;
 };
 
-export const Folder = ({ item, level, children }: FolderProps) => (
-  <Collapsible defaultOpen={item.defaultOpen}>
-    <CollapsibleTrigger
-      className="group mt-4 mb-2 flex w-full items-center justify-between gap-4 first-child:mt-0"
-      data-level={level}
-    >
-      {item.index ? (
-        <Link className="text-pretty font-medium text-sm" href={item.index.url}>
-          {item.name}
-        </Link>
-      ) : (
-        <span className="text-pretty font-medium text-sm">{item.name}</span>
+export const Folder = ({ item, level, children }: FolderProps) => {
+  const pathname = usePathname();
+  const isActive = pathname === item.index?.url;
+
+  const linkInner = item.index ? (
+    <Link
+      className={cn(
+        "text-pretty font-medium text-sm",
+        isActive && "text-primary"
       )}
-      <ChevronRightIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-    </CollapsibleTrigger>
-    <CollapsibleContent>
-      <ul>{children}</ul>
-    </CollapsibleContent>
-  </Collapsible>
-);
+      href={item.index.url}
+    >
+      {item.name}
+    </Link>
+  ) : (
+    <span className="text-pretty font-medium text-sm">{item.name}</span>
+  );
+
+  if (!item.children.length) {
+    return (
+      <div
+        className="mt-4 mb-2 flex w-full items-center justify-between gap-4 first-child:mt-0"
+        data-level={level}
+      >
+        {linkInner}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible defaultOpen={item.defaultOpen}>
+      <CollapsibleTrigger
+        className="group mt-4 mb-2 flex w-full items-center justify-between gap-4 first-child:mt-0"
+        data-level={level}
+      >
+        {linkInner}
+        <ChevronRightIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ul>{children}</ul>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
 
 type ItemProps = {
   item: ItemType;