52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { Outlet, useLocation } from "react-router-dom";
|
|
import { DocSidebar } from "./DocSidebar";
|
|
import { DocBreadcrumbs } from "./DocBreadcrumbs";
|
|
import { DocPagination } from "./DocPagination";
|
|
import { TableOfContents } from "./components/TableOfContents";
|
|
|
|
export function DocLayout() {
|
|
const { pathname } = useLocation();
|
|
const isHome = pathname === "/docs";
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-background">
|
|
{/* Left sidebar */}
|
|
<DocSidebar />
|
|
|
|
{/* Main content */}
|
|
<div className="flex flex-1 min-w-0">
|
|
{/* Article */}
|
|
<main className="flex-1 min-w-0 px-8 py-10 overflow-y-auto max-h-screen">
|
|
<div className="max-w-3xl mx-auto">
|
|
{!isHome && <DocBreadcrumbs />}
|
|
<div
|
|
data-doc-content
|
|
className="prose prose-sm sm:prose-base max-w-none
|
|
prose-headings:font-bold prose-headings:tracking-tight
|
|
prose-h1:text-3xl prose-h1:mb-2
|
|
prose-h2:text-xl prose-h2:mt-8 prose-h2:mb-3
|
|
prose-h3:text-base prose-h3:mt-6 prose-h3:mb-2
|
|
prose-p:text-muted-foreground prose-p:leading-7
|
|
prose-li:text-muted-foreground prose-li:leading-7
|
|
prose-strong:text-foreground
|
|
prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
|
|
prose-a:text-primary prose-a:no-underline hover:prose-a:underline
|
|
"
|
|
>
|
|
<Outlet />
|
|
</div>
|
|
{!isHome && <DocPagination />}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Right TOC (hidden on home page and small screens) */}
|
|
{!isHome && (
|
|
<div className="hidden xl:block w-56 shrink-0 px-6 py-10 overflow-y-auto max-h-screen">
|
|
<TableOfContents />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|