Epic 1: Implement two-level EPD layout and navigation

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>

app/epd/layout.tsx

@@ -20,7 +20,7 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
 
   return (
     <div className="min-h-screen bg-slate-50 flex">
-      {/* Sidebar */}
+      {/* Sidebar - Fixed 240px width on desktop */}
       <EPDSidebar
         userEmail={user?.email}
         userName={user?.user_metadata?.full_name}
@@ -28,9 +28,14 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
 
       {/* Main Content Area */}
       <div className="flex-1 flex flex-col min-w-0">
-        {/* Page Content */}
-        <main className="flex-1 overflow-auto">
-          {children}
+        {/* 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>