update docs (#493)

docs/src/components/sidebar.tsx

@@ -3,20 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMobileNav } from "./mobile-nav-context";
-
-const navigation = [
-  { name: "Introduction", href: "/" },
-  { name: "Installation", href: "/installation" },
-  { name: "Quick Start", href: "/quick-start" },
-  { name: "Commands", href: "/commands" },
-  { name: "Selectors", href: "/selectors" },
-  { name: "Sessions", href: "/sessions" },
-  { name: "Snapshots", href: "/snapshots" },
-  { name: "Streaming", href: "/streaming" },
-  { name: "CDP Mode", href: "/cdp-mode" },
-  { name: "iOS Simulator", href: "/ios" },
-  { name: "Changelog", href: "/changelog" },
-];
+import { navigation } from "@/lib/docs-navigation";
 
 export function Sidebar() {
   const pathname = usePathname();
@@ -43,24 +30,34 @@ export function Sidebar() {
         `}
       >
         <div className="h-full overflow-y-auto py-5 pl-3 pr-5">
-          <nav className="space-y-0.5">
-            {navigation.map((item) => {
-              const isActive = pathname === item.href;
-
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className={`block px-2 py-1.5 text-sm transition-colors ${
-                    isActive
-                      ? "text-foreground"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  {item.name}
-                </Link>
-              );
-            })}
+          <nav className="space-y-4">
+            {navigation.map((section, sectionIndex) => (
+              <div key={section.title ?? sectionIndex}>
+                {section.title && (
+                  <div className="px-2 pb-1 text-xs font-medium text-muted-foreground/60 uppercase tracking-wider">
+                    {section.title}
+                  </div>
+                )}
+                <div className="space-y-0.5">
+                  {section.items.map((item) => {
+                    const isActive = pathname === item.href;
+                    return (
+                      <Link
+                        key={item.href}
+                        href={item.href}
+                        className={`block px-2 py-1.5 text-sm transition-colors ${
+                          isActive
+                            ? "text-foreground"
+                            : "text-muted-foreground hover:text-foreground"
+                        }`}
+                      >
+                        {item.name}
+                      </Link>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
           </nav>
         </div>
       </aside>