78e3019063
Implemented complete two-level navigation system with context-aware sidebar and header components. ## Changes ### Layout (E1.S1) - Add fixed header (60px) to EPD layout - Maintain fixed sidebar (240px) - Add scrollable main content area with padding ### Context-Aware Sidebar (E1.S2) - Level 1 (Behandelaar): Dashboard | Cliënten | Agenda | Rapportage - Level 2 (Client Dossier): ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage - URL-based context detection (/epd/clients/[id]) - Dynamic menu switching with back button in Level 2 ### Context-Aware Header (E1.S3) - Logo left, search right (both levels) - Client selector center (Level 2 only) - Shows client name, ID, and birthdate - Dropdown icon for future client switching ### Routes & Placeholders (E1.S4) - Level 1: /epd/dashboard, /epd/agenda, /epd/reports - Level 2: /epd/clients/[id]/intake, diagnose, plan, reports - All placeholder pages with clear Epic indicators ### Documentation - Add comprehensive bouwplan: docs/specs/UI/bouwplan-mini-epd-v1.0.md - 7 Epics with detailed stories and tech notes ### Fixes - Fix MDX component type import for build 🚀 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
/**
|
|
* EPD Application Layout
|
|
*
|
|
* Layout for the EPD application with sidebar navigation and header.
|
|
* Requires authentication via middleware.
|
|
*/
|
|
|
|
import type { ReactNode } from 'react';
|
|
import { EPDSidebar } from './components/epd-sidebar';
|
|
import { EPDHeader } from './components/epd-header';
|
|
import { getUser } from '@/lib/auth/server';
|
|
|
|
interface EPDLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default async function EPDLayout({ children }: EPDLayoutProps) {
|
|
// Get authenticated user
|
|
const user = await getUser();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 flex">
|
|
{/* Sidebar - Fixed 240px width on desktop */}
|
|
<EPDSidebar
|
|
userEmail={user?.email}
|
|
userName={user?.user_metadata?.full_name}
|
|
/>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
{/* Header - Fixed 60px height */}
|
|
<EPDHeader />
|
|
|
|
{/* Page Content - Scrollable */}
|
|
<main className="flex-1 overflow-auto bg-white">
|
|
<div className="p-8">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|