emulate/apps/web/components/docs-nav.tsx at b2d856fd12a591267b604186b76a627c3d8fb088 · vercel-labs/emulate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type NavSection = {
  title?: string;
  items: { href: string; label: string }[];
};

const sections: NavSection[] = [
  {
    items: [
      { href: "/docs", label: "Getting Started" },
      { href: "/docs/programmatic-api", label: "Programmatic API" },
      { href: "/docs/configuration", label: "Configuration" },
      { href: "/docs/nextjs", label: "Next.js Integration" },
    ],
  },
  {
    title: "Services",
    items: [
      { href: "/docs/vercel", label: "Vercel" },
      { href: "/docs/github", label: "GitHub" },
      { href: "/docs/google", label: "Google" },
      { href: "/docs/slack", label: "Slack" },
      { href: "/docs/apple", label: "Apple" },
      { href: "/docs/microsoft", label: "Microsoft Entra ID" },
      { href: "/docs/aws", label: "AWS" },
      { href: "/docs/okta", label: "Okta" },
      { href: "/docs/mongoatlas", label: "MongoDB Atlas" },
      { href: "/docs/resend", label: "Resend" },
      { href: "/docs/stripe", label: "Stripe" },
      { href: "/docs/linear", label: "Linear" },
    ],
  },
  {
    title: "Reference",
    items: [
      { href: "/docs/authentication", label: "Authentication" },
      { href: "/docs/architecture", label: "Architecture" },
    ],
  },
];

function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="hidden w-56 shrink-0 lg:block">
      <nav className="sticky top-20 space-y-6">
        {sections.map((section, i) => (
          <div key={i}>
            {section.title && (
              <div className="mb-2 px-3 text-xs font-medium uppercase tracking-wider text-neutral-400 dark:text-neutral-600">
                {section.title}
              </div>
            )}
            <div className="space-y-1">
              {section.items.map(({ href, label }) => {
                const active = pathname === href;
                return (
                  <Link
                    key={href}
                    href={href}
                    className={`block rounded-md px-3 py-1.5 text-sm transition-colors ${
                      active
                        ? "bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
                        : "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
                    }`}
                  >
                    {label}
                  </Link>
                );
              })}
            </div>
          </div>
        ))}
      </nav>
    </aside>
  );
}

export function DocsNav({ children }: { children: React.ReactNode }) {
  return (
    <div className="mx-auto max-w-5xl px-6 py-8 lg:py-12">
      <div className="flex gap-12">
        <Sidebar />
        <main className="min-w-0 flex-1">
          <article className="max-w-none">{children}</article>
        </main>
      </div>
    </div>
  );
}