diff --git a/apps/landing/src/app/docs/layout.tsx b/apps/landing/src/app/docs/layout.tsx index 65616e6..69e1d52 100644 --- a/apps/landing/src/app/docs/layout.tsx +++ b/apps/landing/src/app/docs/layout.tsx @@ -4,20 +4,25 @@ import { ReactNode } from 'react'; import { usePathname } from 'next/navigation'; import { SubsectionNav } from '@/components/shared/SubsectionNav'; import { DocsSidebar } from '@/components/docs/layout/DocsSidebar'; +import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout'; /** * Root Documentation Layout * * Provides shared layout elements for all documentation pages: * - SubsectionNav at the top - * - Left Sidebar (DocsSidebar) + * - Three-column layout (left sidebar + content + right TOC via DocPage) * - Background gradients - * - Two-column flex wrapper (sidebar + main content) + * + * Uses ThreeColumnLayout for consistent column structure: + * - Left: DocsSidebar (w-64, hidden lg:block) + * - Center: Page content (flex-1) + * - Right: Handled by DocPage component * * Pages handle their own: * - Breadcrumbs (manually specified) * - Article content - * - TOC sidebar (on the right) + * - TOC sidebar (on the right via DocPage) * * Features: * - Animated gradient background matching landing page @@ -54,17 +59,16 @@ export default function DocsRootLayout({ children }: DocsRootLayoutProps) { ctaHref="/signup" /> - {/* Two-column Documentation Layout */} -
- {/* Left Sidebar - Thin, minimal design */} - - - {/* Main Content Area - Pages render here with their own article + TOC structure */} -
- {children} -
+ {/* Three-column Documentation Layout */} +
+ + +
+ } + center={children} + />
); diff --git a/apps/landing/src/components/docs/layout/DocPage.tsx b/apps/landing/src/components/docs/layout/DocPage.tsx index a14f9e1..3b5ff94 100644 --- a/apps/landing/src/components/docs/layout/DocPage.tsx +++ b/apps/landing/src/components/docs/layout/DocPage.tsx @@ -9,6 +9,10 @@ * - Next Steps section at bottom * - Table of Contents sidebar on the right * + * Uses ThreeColumnLayout for consistent column structure: + * - Center: Article content (max-w-3xl) + * - Right: Table of Contents (w-56, hidden xl:block) + * * This component extracts common layout patterns from all doc pages, * reducing duplication and ensuring consistency. * @@ -29,6 +33,7 @@ import { ReactNode } from 'react'; import { Breadcrumb } from '@/components/docs/shared/Breadcrumb'; import { DocsTOC } from '@/components/docs/layout/DocsTOC'; import { SectionHeader, LinkCard, LinkCardGrid } from '@/components/docs/blocks'; +import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout'; /** * Next step link card configuration @@ -92,45 +97,46 @@ export const DocPage = ({ children, }: DocPageProps) => { return ( -
- {/* Article Content */} -
- {/* Breadcrumb Navigation */} - + + {/* Breadcrumb Navigation */} + - {/* Page Content (Hero + Sections) */} - {children} + {/* Page Content (Hero + Sections) */} + {children} - {/* Next Steps Section */} -
- - Next Steps - + {/* Next Steps Section */} +
+ + Next Steps + - {nextSteps.description && ( -

- {nextSteps.description} -

- )} + {nextSteps.description && ( +

+ {nextSteps.description} +

+ )} - - {nextSteps.links.map((link, index) => ( - - ))} - -
-
- - {/* Right TOC Sidebar */} - -
+ + {nextSteps.links.map((link, index) => ( + + ))} + + + + } + right={ +
+ +
+ } + /> ); }; diff --git a/apps/landing/src/components/layout/ThreeColumnLayout.tsx b/apps/landing/src/components/layout/ThreeColumnLayout.tsx new file mode 100644 index 0000000..4a0c01e --- /dev/null +++ b/apps/landing/src/components/layout/ThreeColumnLayout.tsx @@ -0,0 +1,119 @@ +'use client'; + +/** + * Three Column Layout - Core Wireframe Component + * + * Provides a consistent three-column layout structure used across the application. + * This is the single source of truth for column widths, breakpoints, and responsive behavior. + * + * Column Structure: + * - Left: w-64 (256px), hidden until lg breakpoint + * - Center: flex-1 (flexible, takes remaining space) + * - Right: w-56 (224px), hidden until xl breakpoint + * + * Usage Examples: + * + * 1. SubsectionNav (3 columns): + * } + * center={} + * right={} + * /> + * + * 2. Docs Layout (2 columns - left + center): + * } + * center={} + * /> + * + * 3. Doc Page (2 columns - center + right): + * } + * right={} + * /> + * + * Design Principles: + * - Responsive breakpoints match Tailwind defaults (lg: 1024px, xl: 1280px) + * - Column widths ensure visual alignment across all usage contexts + * - Flexible center column adapts to available space + * - Optional columns enable 1, 2, or 3 column layouts + */ + +import { ReactNode } from 'react'; + +/** + * Props for ThreeColumnLayout component + */ +export interface ThreeColumnLayoutProps { + /** Left column content (w-64, hidden until lg breakpoint) */ + left?: ReactNode; + + /** Center column content (flex-1, always visible) */ + center: ReactNode; + + /** Right column content (w-56, hidden until xl breakpoint) */ + right?: ReactNode; + + /** Additional classes for left column */ + leftClassName?: string; + + /** Additional classes for center column */ + centerClassName?: string; + + /** Additional classes for right column */ + rightClassName?: string; + + /** Additional classes for container */ + containerClassName?: string; + + /** Breakpoint for showing left column (default: 'lg') */ + leftBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + + /** Breakpoint for showing right column (default: 'xl') */ + rightBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +} + +/** + * Three Column Layout Component + * + * Core wireframe for consistent three-column layouts across the application. + * Handles responsive behavior and provides customization via className props. + */ +export const ThreeColumnLayout = ({ + left, + center, + right, + leftClassName = '', + centerClassName = '', + rightClassName = '', + containerClassName = '', + leftBreakpoint = 'lg', + rightBreakpoint = 'xl', +}: ThreeColumnLayoutProps) => { + // Generate responsive visibility classes + const leftHidden = `hidden ${leftBreakpoint}:block`; + const rightHidden = `hidden ${rightBreakpoint}:block`; + + return ( +
+ {/* Left Column - w-64 (256px) */} + {left && ( +
+ {left} +
+ )} + + {/* Center Column - flex-1 (flexible) */} +
+ {center} +
+ + {/* Right Column - w-56 (224px) */} + {right && ( +
+ {right} +
+ )} +
+ ); +}; diff --git a/apps/landing/src/components/shared/SubsectionNav.tsx b/apps/landing/src/components/shared/SubsectionNav.tsx index f3800a9..33ce3aa 100644 --- a/apps/landing/src/components/shared/SubsectionNav.tsx +++ b/apps/landing/src/components/shared/SubsectionNav.tsx @@ -9,17 +9,24 @@ * - Active state indicator (purple color) * - Optional API Key input on the right * - Responsive (hamburger menu on mobile) - * - Can be reused across landing app sections + * - Three-column layout matching docs structure + * - Customizable left/right slots + * + * Uses ThreeColumnLayout for consistent alignment with docs pages. + * Columns align with docs layout at all screen widths. * * Usage: * } + * rightSlot={} * /> */ -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, ReactNode } from 'react'; +import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout'; interface NavItem { label: string; @@ -33,6 +40,10 @@ interface SubsectionNavProps { ctaHref?: string; onCtaClick?: () => void; showApiKeyInput?: boolean; + /** Optional content for left column (w-64, hidden until lg) */ + leftSlot?: ReactNode; + /** Optional content for right column (w-56, hidden until xl). If not provided and showApiKeyInput is true, API key input is used. */ + rightSlot?: ReactNode; } const API_KEY_STORAGE = 'banatie_docs_api_key'; @@ -41,6 +52,8 @@ export const SubsectionNav = ({ items, currentPath, showApiKeyInput = false, + leftSlot, + rightSlot, }: SubsectionNavProps) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [apiKey, setApiKey] = useState(''); @@ -110,32 +123,8 @@ export const SubsectionNav = ({ }; }, []); - return ( -