Sergei
1628501e75
Implemented responsive layout system with: - Header: Top navigation with profile menu and mobile hamburger - Sidebar: Desktop-only navigation sidebar (lg and above) - Breadcrumbs: Auto-generated navigation breadcrumbs - Layout: Main wrapper component with configurable options Features: - Responsive design (mobile, tablet, desktop) - Active route highlighting - User profile integration via auth store - Click-outside dropdown closing - Comprehensive test coverage (49 tests passing) Updated (main) layout to use new Layout component system. Updated dashboard page to work with new layout structure. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
138 lines
2.8 KiB
TypeScript
138 lines
2.8 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
|
|
*/
|
|
const maxWidthClasses = {
|
|
full: '',
|
|
'7xl': 'max-w-7xl',
|
|
'6xl': 'max-w-6xl',
|
|
'5xl': 'max-w-5xl',
|
|
'4xl': 'max-w-4xl',
|
|
};
|
|
|
|
/**
|
|
* 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' : ''}`}>
|
|
{/* Header */}
|
|
{showHeader && <Header />}
|
|
|
|
{/* Page content */}
|
|
<main className="flex-1">
|
|
<div className={`mx-auto px-4 py-6 sm:px-6 lg:px-8 ${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>
|
|
);
|
|
}
|