65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Documentation Layout - Final Variant
|
|
*
|
|
* Based on Variant A: Clean & Minimal with enhancements
|
|
* This is the production-ready version combining the best aspects
|
|
*
|
|
* Layout Structure:
|
|
* - Left Sidebar: Thin (256px) with minimal design
|
|
* - Content Area: Wide margins (max-w-3xl) for comfortable reading
|
|
* - Right TOC: Subtle and unobtrusive (224px)
|
|
*
|
|
* Responsive Behavior:
|
|
* - Mobile (<768px): Single column, sidebars become overlays
|
|
* - Tablet (768px-1024px): Content + TOC only
|
|
* - Desktop (>1024px): Full three-column layout
|
|
*
|
|
* Design Characteristics:
|
|
* - Generous whitespace
|
|
* - Subtle borders and shadows
|
|
* - Focus on content clarity
|
|
* - Minimal visual noise
|
|
* - Accessibility compliant (WCAG 2.1 AA)
|
|
*/
|
|
|
|
import { ReactNode } from 'react';
|
|
|
|
interface DocsLayoutFinalProps {
|
|
sidebar: ReactNode;
|
|
children: ReactNode;
|
|
toc: ReactNode;
|
|
}
|
|
|
|
export const DocsLayoutFinal = ({ sidebar, children, toc }: DocsLayoutFinalProps) => {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
|
|
{/* Animated gradient background (matching landing page) */}
|
|
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
|
<div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex">
|
|
{/* Left Sidebar - Thin, minimal design */}
|
|
<aside className="hidden lg:block w-64 border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-0 h-screen overflow-y-auto">
|
|
{sidebar}
|
|
</aside>
|
|
|
|
{/* Main Content Area - Wide margins for comfortable reading */}
|
|
<main className="flex-1 min-w-0">
|
|
<div className="max-w-3xl mx-auto px-6 lg:px-12 py-12">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Right TOC - Subtle and unobtrusive */}
|
|
<aside className="hidden xl:block w-56 border-l border-white/10 bg-slate-950/30 backdrop-blur-sm sticky top-0 h-screen overflow-y-auto">
|
|
{toc}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|