mcpedia/apps/web/app/components/Sidebar.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface Doc {
  slug: string;
  title: string;
  section: string;
  tags: string[];
}

const SECTIONS = [
  { id: "docs", label: "Documentation", icon: "📄" },
  { id: "writeups", label: "Writeups", icon: "📝" },
  { id: "research", label: "Research", icon: "🔬" },
  { id: "notes", label: "Notes", icon: "📌" },
] as const;

/** Client-side sidebar (fetches doc list via /api/docs at runtime).
 *  Client component so `next build` SSG doesn't hit Postgres (CI has no DB). */
export default function Sidebar() {
  const [docs, setDocs] = useState<Doc[]>([]);
  const pathname = usePathname();

  useEffect(() => {
    fetch("/api/docs")
      .then((r) => r.json())
      .then((data) => {
        if (Array.isArray(data)) setDocs(data);
        else if (data?.docs) setDocs(data.docs);
      })
      .catch(() => setDocs([]));
  }, []);

  const bySection: Record<string, Doc[]> = {};
  for (const doc of docs) {
    if (!bySection[doc.section]) bySection[doc.section] = [];
    bySection[doc.section].push(doc);
  }

  return (
    <nav className="h-full overflow-y-auto py-6">
      <ul className="space-y-1 px-3 text-sm">
        {SECTIONS.map(({ id, label, icon }) => {
          const sectionDocs = bySection[id] || [];
          if (sectionDocs.length === 0) return null;

          // Check if any doc in this section is the active page
          const isActive = sectionDocs.some(
            (doc) => pathname === `/${doc.slug}` || pathname === `/${doc.section}`,
          );

          return (
            <li key={id}>
              <div
                className={`text-xs font-medium mb-1 mt-4 first:mt-0 flex items-center gap-1.5 ${
                  isActive
                    ? "text-[#7170ff]"
                    : "text-[#62666d]"
                }`}
              >
                <span>{icon}</span>
                {label}
              </div>
              <ul className="space-y-0.5">
                {sectionDocs.map((doc) => {
                  const parts = doc.slug.split("/").slice(1);
                  const label = parts[parts.length - 1];
                  const formatted = label
                    .split(/[-_]/)
                    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                    .join(" ");
                  const depth = doc.slug.split("/").length;
                  const indent = depth - 1;
                  const isDocActive = pathname === `/${doc.slug}`;
                  return (
                    <li
                      key={doc.slug}
                      style={{ marginLeft: `${indent * 12}px` }}
                    >
                      <Link
                        href={`/${doc.slug}`}
                        className={`block text-xs py-0.5 rounded transition-all ${
                          isDocActive
                            ? "text-[#7170ff] bg-[#191a1b]"
                            : "text-[#d0d6e0] hover:text-[#f7f8f8] hover:bg-[#191a1b]"
                        }`}
                        title={doc.title}
                      >
                        {formatted || doc.slug}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}