Files
VectorDNS/app/docs/layout.tsx
Aiden Smith 301402e2b1 Add documentation pages with interactive architecture diagram
- /docs route with sidebar navigation and index page
- Architecture section: system overview with React Flow diagram, data flow, database schema
- API reference, configuration guide, and self-hosting docs for Go DNS server
- Feature planning document for future development
- Added docs link to landing page nav
2026-02-24 18:23:09 -05:00

73 lines
2.6 KiB
TypeScript

import type { Metadata } from "next";
import Link from "next/link";
import { Globe, BookOpen, Menu } from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { DocsSidebar } from "@/components/docs/sidebar";
export const metadata: Metadata = {
title: {
default: "Documentation",
template: "%s | VectorDNS Docs",
},
};
export default function DocsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen flex-col">
{/* Header */}
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
<div className="container mx-auto flex h-14 items-center justify-between px-4">
<div className="flex items-center gap-4">
<Link href="/" className="flex items-center gap-2">
<Globe className="size-5 text-primary" />
<span className="text-lg font-semibold tracking-tight">
VectorDNS
</span>
</Link>
<span className="text-muted-foreground">/</span>
<Link
href="/docs"
className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
>
<BookOpen className="size-4" />
Docs
</Link>
</div>
<ThemeToggle />
</div>
</header>
<div className="container mx-auto flex flex-1 px-4">
{/* Mobile sidebar toggle */}
<input type="checkbox" id="sidebar-toggle" className="peer hidden" />
<label
htmlFor="sidebar-toggle"
className="fixed bottom-4 right-4 z-40 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg md:hidden"
>
<Menu className="size-5" />
</label>
{/* Sidebar */}
<aside className="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full border-r bg-background p-6 pt-20 transition-transform peer-checked:translate-x-0 md:sticky md:top-14 md:z-auto md:block md:h-[calc(100vh-3.5rem)] md:w-56 md:translate-x-0 md:border-r-0 md:p-0 md:py-8 md:pr-6 lg:w-64">
<DocsSidebar />
</aside>
{/* Overlay for mobile sidebar */}
<label
htmlFor="sidebar-toggle"
className="fixed inset-0 z-20 hidden bg-black/50 peer-checked:block md:hidden!"
/>
{/* Main content */}
<main className="min-w-0 flex-1 py-8 md:pl-6 md:border-l">
<div className="mx-auto max-w-3xl">{children}</div>
</main>
</div>
</div>
);
}