Sergei
5b04765b0d
- Extended Tailwind config with 3xl (1920px) and 4xl (2560px) breakpoints - Added responsive max-widths (8xl, 9xl, 10xl) for large screens - Updated Layout component with scaling max-width and padding - Made Header container responsive for large displays - Added responsive Sidebar width (64→72→80 for lg→3xl→4xl) - Implemented responsive typography in globals.css - Updated Dashboard grids to utilize more columns on large screens - Added comprehensive unit tests for responsive classes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
139 lines
3.0 KiB
TypeScript
139 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Header } from './Header';
|
|
import { Sidebar } from './Sidebar';
|
|
import { Breadcrumbs } from './Breadcrumbs';
|
|
|
|
/**
|
|
* Layout Props
|
|
*/
|
|
interface LayoutProps {
|
|
/**
|
|
* Page content
|
|
*/
|
|
children: ReactNode;
|
|
|
|
/**
|
|
* Show sidebar (desktop only)
|
|
* @default true
|
|
*/
|
|
showSidebar?: boolean;
|
|
|
|
/**
|
|
* Show header
|
|
* @default true
|
|
*/
|
|
showHeader?: boolean;
|
|
|
|
/**
|
|
* Show breadcrumbs
|
|
* @default true
|
|
*/
|
|
showBreadcrumbs?: boolean;
|
|
|
|
/**
|
|
* Maximum content width
|
|
* @default '7xl' (1280px)
|
|
*/
|
|
maxWidth?: 'full' | '7xl' | '6xl' | '5xl' | '4xl';
|
|
|
|
/**
|
|
* Custom page title (shown in breadcrumbs if provided)
|
|
*/
|
|
title?: string;
|
|
}
|
|
|
|
/**
|
|
* Max width classes mapping
|
|
* Responsive: scales up on larger screens for better use of space
|
|
*/
|
|
const maxWidthClasses = {
|
|
full: '',
|
|
'7xl': 'max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl',
|
|
'6xl': 'max-w-6xl 3xl:max-w-7xl 4xl:max-w-8xl',
|
|
'5xl': 'max-w-5xl 3xl:max-w-6xl 4xl:max-w-7xl',
|
|
'4xl': 'max-w-4xl 3xl:max-w-5xl 4xl:max-w-6xl',
|
|
};
|
|
|
|
/**
|
|
* Main Layout Component
|
|
*
|
|
* Provides consistent layout structure for authenticated pages.
|
|
*
|
|
* Layout structure:
|
|
* - Desktop (lg+): Sidebar + Header + Main content
|
|
* - Mobile/Tablet: Header + Main content
|
|
*
|
|
* Features:
|
|
* - Responsive sidebar (desktop only)
|
|
* - Sticky header
|
|
* - Breadcrumb navigation
|
|
* - Configurable max-width
|
|
* - Proper spacing and padding
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Default layout (all features enabled)
|
|
* <Layout>
|
|
* <h1>Dashboard</h1>
|
|
* <p>Content here</p>
|
|
* </Layout>
|
|
*
|
|
* // Custom layout without sidebar
|
|
* <Layout showSidebar={false} maxWidth="4xl">
|
|
* <h1>Profile</h1>
|
|
* </Layout>
|
|
*
|
|
* // Full-width layout
|
|
* <Layout maxWidth="full">
|
|
* <div>Full width content</div>
|
|
* </Layout>
|
|
* ```
|
|
*/
|
|
export function Layout({
|
|
children,
|
|
showSidebar = true,
|
|
showHeader = true,
|
|
showBreadcrumbs = true,
|
|
maxWidth = '7xl',
|
|
title,
|
|
}: LayoutProps) {
|
|
const maxWidthClass = maxWidthClasses[maxWidth];
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-slate-50">
|
|
{/* Sidebar - Desktop only */}
|
|
{showSidebar && <Sidebar />}
|
|
|
|
{/* Main content area */}
|
|
<div className={`flex flex-1 flex-col ${showSidebar ? 'lg:pl-64 3xl:pl-72 4xl:pl-80' : ''}`}>
|
|
{/* Header */}
|
|
{showHeader && <Header />}
|
|
|
|
{/* Page content */}
|
|
<main className="flex-1">
|
|
<div className={`mx-auto px-4 py-6 sm:px-6 lg:px-8 xl:px-10 3xl:px-12 4xl:px-16 ${maxWidthClass}`}>
|
|
{/* Breadcrumbs */}
|
|
{showBreadcrumbs && (
|
|
<div className="mb-6">
|
|
<Breadcrumbs />
|
|
</div>
|
|
)}
|
|
|
|
{/* Page title (if provided) */}
|
|
{title && (
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-semibold text-slate-900">{title}</h1>
|
|
</div>
|
|
)}
|
|
|
|
{/* Page content */}
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|