feat(docs): add mobile docs menu

- add a compact docs sidebar trigger in the header on mobile
- close the menu after selecting a nav item

Author: kacigaya

web/src/app/docs/layout.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { asset } from "@/lib/asset";
-import { DocsSidebar } from "@/components/docs-sidebar";
+import { DocsSidebar, MobileDocsMenu } from "@/components/docs-sidebar";
 import { ThemeToggle } from "@/components/theme-toggle";
 
 const GITHUB_URL = "https://github.com/kacigaya/webskrap";
@@ -21,6 +21,7 @@ export default function DocsLayout({
             <span className="font-semibold tracking-tight">WebSkrap</span>
           </Link>
           <nav className="flex items-center gap-2">
+            <MobileDocsMenu />
             <ThemeToggle />
             <Button variant="outline" size="sm" render={<a href={GITHUB_URL} />}>
               GitHub

web/src/components/docs-sidebar.tsx

@@ -2,6 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Menu } from "lucide-react";
+import { useRef } from "react";
 import { NAV } from "@/lib/docs-nav";
 import { cn } from "@/lib/utils";
 
@@ -39,3 +41,22 @@ export function DocsSidebar() {
     </nav>
   );
 }
+
+export function MobileDocsMenu() {
+  const details = useRef<HTMLDetailsElement>(null);
+
+  return (
+    <details ref={details} className="relative md:hidden">
+      <summary className="flex size-8 cursor-pointer list-none items-center justify-center rounded-md border hover:bg-accent [&::-webkit-details-marker]:hidden">
+        <Menu className="size-4" />
+        <span className="sr-only">Open documentation menu</span>
+      </summary>
+      <div
+        className="absolute right-0 top-11 max-h-[calc(100vh-6rem)] w-72 overflow-y-auto rounded-xl border bg-background p-4 shadow-lg"
+        onClick={() => details.current?.removeAttribute("open")}
+      >
+        <DocsSidebar />
+      </div>
+    </details>
+  );
+}