71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
|
|
import '~/styles.css'
|
|
|
|
export const Route = createFileRoute('/docs')({
|
|
component: DocsLayout,
|
|
})
|
|
|
|
const navigation = [
|
|
{ name: 'Getting started', href: '/docs' },
|
|
{ name: 'Updates', href: '/docs/updates' },
|
|
{ name: 'Voice', href: '/docs/voice' },
|
|
{ name: 'Git worktrees', href: '/docs/worktrees' },
|
|
{ name: 'CLI', href: '/docs/cli' },
|
|
{ name: 'Configuration', href: '/docs/configuration' },
|
|
{ name: 'Security', href: '/docs/security' },
|
|
{ name: 'Best practices', href: '/docs/best-practices' },
|
|
]
|
|
|
|
function DocsLayout() {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Mobile header */}
|
|
<header className="md:hidden border-b border-border p-4">
|
|
<Link to="/" className="flex items-center gap-3">
|
|
<img src="/logo.svg" alt="Paseo" className="w-6 h-6" />
|
|
<span className="text-lg font-medium">Paseo</span>
|
|
</Link>
|
|
<nav className="flex gap-4 mt-4">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
activeOptions={{ exact: true }}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
activeProps={{ className: 'text-foreground' }}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</header>
|
|
|
|
<div className="max-w-5xl mx-auto flex">
|
|
{/* Desktop sidebar */}
|
|
<aside className="hidden md:block w-56 shrink-0 border-r border-border p-6 sticky top-0 h-screen">
|
|
<Link to="/" className="flex items-center gap-3 mb-8">
|
|
<img src="/logo.svg" alt="Paseo" className="w-6 h-6" />
|
|
<span className="text-lg font-medium">Paseo</span>
|
|
</Link>
|
|
<nav className="space-y-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
activeOptions={{ exact: true }}
|
|
className="block px-3 py-2 text-sm rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
activeProps={{ className: 'bg-muted text-foreground' }}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
<main className="flex-1 p-6 md:p-12 max-w-3xl">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|