82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|