update

web/components/DocSidebar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+import { Menu } from "lucide-react"
+
+const sidebarItems = [
+  { title: "Introduction", href: "/docs/introduction" },
+  { title: "Installation", href: "/docs/installation" },
+  { title: "Getting Started", href: "/docs/getting-started" },
+  { title: "Features", href: "/docs/features" },
+  { title: "API", href: "/docs/api" },
+  { title: "Guides", href: "/guides" },
+  { title: "FAQ", href: "/docs/faq" },
+]
+
+export default function DocSidebar() {
+  const pathname = usePathname()
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <nav className="w-full md:w-64 bg-gray-100 p-4 md:p-6">
+      <div className="flex justify-between items-center md:block">
+        <h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2>
+        <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
+          <Menu className="h-6 w-6" />
+        </button>
+      </div>
+      <ul className={`space-y-2 ${isOpen ? "block" : "hidden"} md:block`}>
+        {sidebarItems.map((item) => (
+          <li key={item.href}>
+            <Link
+              href={item.href}
+              className={`block p-2 rounded ${
+                pathname === item.href
+                  ? "bg-blue-500 text-white"
+                  : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
+              }`}
+              onClick={() => setIsOpen(false)}
+            >
+              {item.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+