Gitbook-style docs layout - redesigned without header
cgen-3e89017215dd4aac897aaad572f1790e
This commit is contained in:
Builder.io
parent
7e542186bb
commit
6c9a48ba7d
1 changed files with 188 additions and 240 deletions
|
|
@ -12,9 +12,9 @@ import {
|
||||||
GitBranch,
|
GitBranch,
|
||||||
Layers,
|
Layers,
|
||||||
BookMarked,
|
BookMarked,
|
||||||
|
ArrowLeft,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
interface DocNavItem {
|
interface DocNavItem {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -112,278 +112,226 @@ export default function DocsLayout({
|
||||||
const isCurrentPage = (path: string) => location.pathname === path;
|
const isCurrentPage = (path: string) => location.pathname === path;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-slate-100">
|
<div className="min-h-screen bg-white text-slate-900">
|
||||||
{/* Header */}
|
{/* Sidebar */}
|
||||||
<header className="sticky top-0 z-40 border-b border-slate-800 bg-slate-950/80 backdrop-blur-sm">
|
<aside
|
||||||
<div className="flex h-16 items-center justify-between px-4 md:px-6">
|
className={`fixed inset-y-0 left-0 z-30 w-64 border-r border-slate-200 bg-white overflow-y-auto transition-all duration-300 ${
|
||||||
<div className="flex items-center gap-3">
|
sidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
|
||||||
<button
|
}`}
|
||||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
>
|
||||||
className="md:hidden p-2 hover:bg-slate-800 rounded-lg"
|
{/* Back to Main Site Button */}
|
||||||
>
|
<div className="p-4 border-b border-slate-200">
|
||||||
{sidebarOpen ? (
|
|
||||||
<X className="h-5 w-5" />
|
|
||||||
) : (
|
|
||||||
<Menu className="h-5 w-5" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<Link to="/docs/overview" className="flex items-center gap-2">
|
|
||||||
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
|
|
||||||
<BookOpen className="h-5 w-5 text-white" />
|
|
||||||
</div>
|
|
||||||
<span className="font-semibold text-white hidden sm:inline">
|
|
||||||
AeThex Docs
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search Bar - Desktop */}
|
|
||||||
<div className="flex-1 max-w-sm mx-4 hidden sm:block">
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500" />
|
|
||||||
<Input
|
|
||||||
placeholder="Search documentation..."
|
|
||||||
className="bg-slate-800 border-slate-700 pl-10 pr-4 text-sm"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* GitHub Link */}
|
|
||||||
<Link
|
<Link
|
||||||
to="/docs/overview"
|
to="/"
|
||||||
className="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-slate-800 transition-colors text-sm"
|
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 transition-colors w-full justify-center"
|
||||||
>
|
>
|
||||||
GitHub
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
Back to Main Site
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Search */}
|
{/* Search Bar */}
|
||||||
<div className="sm:hidden px-4 py-2 border-t border-slate-800">
|
<div className="p-4 border-b border-slate-200">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500" />
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="Search..."
|
placeholder="Search docs..."
|
||||||
className="bg-slate-800 border-slate-700 pl-10 pr-4 text-sm w-full"
|
className="bg-slate-50 border-slate-300 pl-10 pr-4 text-sm"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="flex">
|
{/* Navigation */}
|
||||||
{/* Sidebar */}
|
<nav className="p-4 space-y-1">
|
||||||
<aside
|
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-4 px-2">
|
||||||
className={`fixed inset-y-0 top-16 z-30 w-64 border-r border-slate-800 bg-slate-950 overflow-y-auto transition-all duration-300 md:relative md:inset-auto md:top-0 md:block ${
|
Documentation
|
||||||
sidebarOpen ? "left-0" : "-left-64"
|
</div>
|
||||||
}`}
|
{filteredNav.map((item) => (
|
||||||
>
|
<Link
|
||||||
<nav className="p-4 space-y-1">
|
key={item.path}
|
||||||
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-4 px-2">
|
to={item.path}
|
||||||
Documentation
|
onClick={() => setSidebarOpen(false)}
|
||||||
</div>
|
className={`flex items-start gap-3 px-3 py-3 rounded-lg transition-all group ${
|
||||||
{filteredNav.map((item) => (
|
isCurrentPage(item.path)
|
||||||
<Link
|
? "bg-blue-50 border border-blue-200"
|
||||||
key={item.path}
|
: "hover:bg-slate-50"
|
||||||
to={item.path}
|
}`}
|
||||||
onClick={() => setSidebarOpen(false)}
|
>
|
||||||
className={`flex items-start gap-3 px-3 py-3 rounded-lg transition-all group ${
|
<div
|
||||||
|
className={`h-5 w-5 flex-shrink-0 mt-0.5 ${
|
||||||
isCurrentPage(item.path)
|
isCurrentPage(item.path)
|
||||||
? "bg-slate-800 border border-slate-700"
|
? "text-blue-600"
|
||||||
: "hover:bg-slate-800/50"
|
: "text-slate-400 group-hover:text-slate-600"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
{item.icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
<div
|
<div
|
||||||
className={`h-5 w-5 flex-shrink-0 mt-0.5 ${
|
className={`text-sm font-medium ${
|
||||||
isCurrentPage(item.path)
|
isCurrentPage(item.path)
|
||||||
? "text-cyan-400"
|
? "text-slate-900"
|
||||||
: "text-slate-500 group-hover:text-slate-300"
|
: "text-slate-700"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{item.icon}
|
{item.title}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
{item.description && (
|
||||||
<div
|
<div className="text-xs text-slate-500 line-clamp-1">
|
||||||
className={`text-sm font-medium ${
|
{item.description}
|
||||||
isCurrentPage(item.path)
|
|
||||||
? "text-white"
|
|
||||||
: "text-slate-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</div>
|
</div>
|
||||||
{item.description && (
|
|
||||||
<div className="text-xs text-slate-500 line-clamp-1">
|
|
||||||
{item.description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
|
||||||
<main className="flex-1 overflow-hidden">
|
|
||||||
{/* Breadcrumbs */}
|
|
||||||
{breadcrumbs && (
|
|
||||||
<div className="border-b border-slate-800 bg-slate-950/50 px-4 md:px-8 py-3">
|
|
||||||
<div className="flex items-center gap-2 text-sm">
|
|
||||||
<Link
|
|
||||||
to="/docs/overview"
|
|
||||||
className="text-slate-400 hover:text-slate-300"
|
|
||||||
>
|
|
||||||
Docs
|
|
||||||
</Link>
|
|
||||||
{breadcrumbs.map((crumb, idx) => (
|
|
||||||
<React.Fragment key={idx}>
|
|
||||||
<ChevronRight className="h-4 w-4 text-slate-600" />
|
|
||||||
{crumb.path ? (
|
|
||||||
<Link
|
|
||||||
to={crumb.path}
|
|
||||||
className="text-slate-400 hover:text-slate-300"
|
|
||||||
>
|
|
||||||
{crumb.label}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<span className="text-slate-300">{crumb.label}</span>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 px-4 md:px-8 py-8 max-w-7xl mx-auto">
|
|
||||||
{/* Content */}
|
|
||||||
<div className="lg:col-span-3">
|
|
||||||
{/* Page Header */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<h1 className="text-4xl font-bold text-white mb-2">{title}</h1>
|
|
||||||
{description && (
|
|
||||||
<p className="text-lg text-slate-400">{description}</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Main Content */}
|
||||||
<div className="prose prose-invert max-w-none">{children}</div>
|
<main className="md:ml-64">
|
||||||
|
{/* Mobile Header */}
|
||||||
|
<div className="md:hidden sticky top-0 z-20 border-b border-slate-200 bg-white p-4 flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded-lg"
|
||||||
|
>
|
||||||
|
{sidebarOpen ? (
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<Menu className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<Link to="/" className="text-sm font-medium text-slate-600 hover:text-slate-900">
|
||||||
|
← Back
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 px-6 md:px-8 py-8 max-w-7xl mx-auto">
|
||||||
|
{/* Content */}
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
{/* Page Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-5xl font-bold text-slate-900 mb-3">{title}</h1>
|
||||||
|
{description && (
|
||||||
|
<p className="text-lg text-slate-600">{description}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Contents - Right Sidebar */}
|
{/* Content */}
|
||||||
{tableOfContents.length > 0 && (
|
<div className="prose prose-slate max-w-none">{children}</div>
|
||||||
<aside className="hidden lg:block">
|
|
||||||
<div className="sticky top-20">
|
|
||||||
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-4">
|
|
||||||
On this page
|
|
||||||
</div>
|
|
||||||
<nav className="space-y-2">
|
|
||||||
{tableOfContents.map((item) => (
|
|
||||||
<a
|
|
||||||
key={item.id}
|
|
||||||
href={`#${item.id}`}
|
|
||||||
className={`block text-sm transition-colors line-clamp-2 ${
|
|
||||||
item.level === 2
|
|
||||||
? "text-slate-400 hover:text-slate-200"
|
|
||||||
: "text-slate-500 hover:text-slate-300 pl-4"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Table of Contents - Right Sidebar */}
|
||||||
<footer className="border-t border-slate-800 bg-slate-950/50 mt-12">
|
{tableOfContents.length > 0 && (
|
||||||
<div className="max-w-7xl mx-auto px-4 md:px-8 py-8">
|
<aside className="hidden lg:block">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div className="sticky top-8">
|
||||||
<div>
|
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-4">
|
||||||
<h3 className="font-semibold text-white mb-3">Product</h3>
|
On this page
|
||||||
<ul className="space-y-2 text-sm text-slate-400">
|
|
||||||
<li>
|
|
||||||
<Link to="/docs/overview" className="hover:text-slate-200">
|
|
||||||
Features
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/docs/platform" className="hover:text-slate-200">
|
|
||||||
Platform
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" className="hover:text-slate-200">
|
|
||||||
Pricing
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-white mb-3">Resources</h3>
|
|
||||||
<ul className="space-y-2 text-sm text-slate-400">
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to="/docs/tutorials"
|
|
||||||
className="hover:text-slate-200"
|
|
||||||
>
|
|
||||||
Tutorials
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to="/docs/api-reference"
|
|
||||||
className="hover:text-slate-200"
|
|
||||||
>
|
|
||||||
API Reference
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" className="hover:text-slate-200">
|
|
||||||
Blog
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-white mb-3">Community</h3>
|
|
||||||
<ul className="space-y-2 text-sm text-slate-400">
|
|
||||||
<li>
|
|
||||||
<a href="#" className="hover:text-slate-200">
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" className="hover:text-slate-200">
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" className="hover:text-slate-200">
|
|
||||||
Twitter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
<nav className="space-y-2">
|
||||||
|
{tableOfContents.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.id}
|
||||||
|
href={`#${item.id}`}
|
||||||
|
className={`block text-sm transition-colors line-clamp-2 ${
|
||||||
|
item.level === 2
|
||||||
|
? "text-slate-700 hover:text-slate-900 font-medium"
|
||||||
|
: "text-slate-600 hover:text-slate-900 pl-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-t border-slate-800 mt-8 pt-8 flex justify-between items-center text-sm text-slate-500">
|
</aside>
|
||||||
<p>© 2025 AeThex. All rights reserved.</p>
|
)}
|
||||||
<div className="flex gap-4">
|
</div>
|
||||||
<a href="#" className="hover:text-slate-400">
|
|
||||||
Privacy
|
{/* Footer */}
|
||||||
</a>
|
<footer className="border-t border-slate-200 bg-slate-50 mt-12">
|
||||||
<a href="#" className="hover:text-slate-400">
|
<div className="max-w-7xl mx-auto px-6 md:px-8 py-12">
|
||||||
Terms
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
</a>
|
<div>
|
||||||
</div>
|
<h3 className="font-semibold text-slate-900 mb-4">Product</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-slate-600">
|
||||||
|
<li>
|
||||||
|
<Link to="/docs/overview" className="hover:text-slate-900">
|
||||||
|
Features
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/docs/platform" className="hover:text-slate-900">
|
||||||
|
Platform
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Pricing
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-slate-900 mb-4">Resources</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-slate-600">
|
||||||
|
<li>
|
||||||
|
<Link to="/docs/tutorials" className="hover:text-slate-900">
|
||||||
|
Tutorials
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/docs/api-reference"
|
||||||
|
className="hover:text-slate-900"
|
||||||
|
>
|
||||||
|
API Reference
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-slate-900 mb-4">Community</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-slate-600">
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Discord
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
<div className="border-t border-slate-200 mt-8 pt-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 text-sm text-slate-600">
|
||||||
</main>
|
<p>© 2025 AeThex. All rights reserved.</p>
|
||||||
</div>
|
<div className="flex gap-6">
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Privacy
|
||||||
|
</a>
|
||||||
|
<a href="#" className="hover:text-slate-900">
|
||||||
|
Terms
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
{/* Mobile Overlay */}
|
{/* Mobile Overlay */}
|
||||||
{sidebarOpen && (
|
{sidebarOpen && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue