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/components/epd-sidebar.tsx

@@ -29,13 +29,21 @@ interface EPDSidebarProps {
   userName?: string;
 }
 
-// EPD Navigation items
-const navigationItems: NavigationItem[] = [
-  { id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/clients" },
+// LEVEL 1: Behandelaar Context Navigation
+const level1NavigationItems: NavigationItem[] = [
+  { id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/dashboard" },
   { id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" },
-  { id: "documentation", name: "Documentatie", icon: FileText, href: "/epd/docs" },
-  { id: "settings", name: "Instellingen", icon: Settings, href: "/epd/settings" },
-  { id: "help", name: "Help", icon: HelpCircle, href: "/epd/help" },
+  { id: "agenda", name: "Agenda", icon: FileText, href: "/epd/agenda" },
+  { id: "reports", name: "Rapportage", icon: Settings, href: "/epd/reports" },
+];
+
+// LEVEL 2: Client Dossier Context Navigation (clientId gets injected)
+const level2NavigationItems: NavigationItem[] = [
+  { id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/dashboard" },
+  { id: "intake", name: "Intake", icon: FileText, href: "/intake" },
+  { id: "diagnose", name: "Diagnose", icon: Settings, href: "/diagnose" },
+  { id: "plan", name: "Behandelplan", icon: HelpCircle, href: "/plan" },
+  { id: "reports", name: "Rapportage", icon: Settings, href: "/reports" },
 ];
 
 export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) {
@@ -43,6 +51,18 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
   const [isOpen, setIsOpen] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
+  // Context detection: Level 2 if URL contains /clients/[id]
+  const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
+  const clientId = isClientContext ? pathname.split('/')[3] : null;
+
+  // Determine which navigation items to show
+  const navigationItems = isClientContext
+    ? level2NavigationItems.map(item => ({
+        ...item,
+        href: `/epd/clients/${clientId}${item.href}`
+      }))
+    : level1NavigationItems;
+
   // Auto-open sidebar on desktop
   useEffect(() => {
     const handleResize = () => {
@@ -140,6 +160,20 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
 
         {/* Navigation */}
         <nav className="flex-1 px-3 py-4 overflow-y-auto">
+          {/* Back to Cliënten button (Level 2 only) */}
+          {isClientContext && (
+            <>
+              <Link
+                href="/epd/clients"
+                className="flex items-center gap-2 px-3 py-2.5 mb-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-md transition-colors"
+              >
+                <ChevronLeft className="h-4 w-4" />
+                {!isCollapsed && <span>Cliënten</span>}
+              </Link>
+              <div className="h-px bg-slate-200 my-2 mx-3" />
+            </>
+          )}
+
           <ul className="space-y-1">
             {navigationItems.map((item) => {
               const Icon = item.icon;