add skills to docs (#576)

2026-03-01 09:02:06 -06:00
parent 14ec5b5ffa
commit 79d8dfe34c
19 changed files with 720 additions and 292 deletions
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { navigation, allDocsPages } from "@/lib/docs-navigation";
+
+export function DocsMobileNav() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const currentPage = useMemo(() => {
+    const page = allDocsPages.find((p) => p.href === pathname);
+    return page ?? allDocsPages[0];
+  }, [pathname]);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger className="lg:hidden sticky top-14 z-40 w-full px-6 py-3 bg-background/80 backdrop-blur-sm border-b border-border flex items-center justify-between focus:outline-none">
+        <div className="text-sm font-medium">{currentPage?.name}</div>
+        <div className="w-8 h-8 flex items-center justify-center">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-muted-foreground"
+          >
+            <line x1="8" y1="6" x2="21" y2="6" />
+            <line x1="8" y1="12" x2="21" y2="12" />
+            <line x1="8" y1="18" x2="21" y2="18" />
+            <line x1="3" y1="6" x2="3.01" y2="6" />
+            <line x1="3" y1="12" x2="3.01" y2="12" />
+            <line x1="3" y1="18" x2="3.01" y2="18" />
+          </svg>
+        </div>
+      </SheetTrigger>
+      <SheetContent side="left" showCloseButton={false} className="overflow-y-auto p-6">
+        <SheetTitle className="mb-6">Table of Contents</SheetTitle>
+        <nav className="space-y-6">
+          {navigation.map((section, sectionIndex) => (
+            <div key={section.title ?? sectionIndex}>
+              {section.title && (
+                <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                  {section.title}
+                </h4>
+              )}
+              <ul className="space-y-1">
+                {section.items.map((item) => (
+                  <li key={item.href}>
+                    <Link
+                      href={item.href}
+                      onClick={() => setOpen(false)}
+                      className={`text-sm block py-2 transition-colors ${
+                        pathname === item.href
+                          ? "text-primary font-medium"
+                          : "text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      </SheetContent>
+    </Sheet>
+  );
+}