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>
63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import { Search, ChevronDown } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface EPDHeaderProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function EPDHeader({ className = "" }: EPDHeaderProps) {
|
|
const pathname = usePathname();
|
|
|
|
// Context detection: Level 2 if URL contains /clients/[id]
|
|
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
|
|
const clientId = isClientContext ? pathname.split('/')[3] : null;
|
|
|
|
// TODO: Fetch actual client data based on clientId
|
|
// For now, hardcoded demo data
|
|
const selectedClient = clientId ? {
|
|
name: "Bas Jansen",
|
|
id: "CL0002",
|
|
birthDate: "20-11-1992"
|
|
} : null;
|
|
|
|
return (
|
|
<header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
|
|
{/* Left: Logo */}
|
|
<div className="flex items-center">
|
|
<span className="text-base font-medium text-slate-800">Mini-ECD</span>
|
|
</div>
|
|
|
|
{/* Center: Client Selector (only in Level 2) */}
|
|
<div className="flex-1 flex justify-center">
|
|
{selectedClient && (
|
|
<button className="flex flex-col items-center px-4 py-1 hover:bg-slate-50 rounded-md transition-colors group">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-sm font-medium text-slate-900">
|
|
{selectedClient.name}
|
|
</span>
|
|
<ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
|
|
</div>
|
|
<span className="text-xs text-slate-500">
|
|
ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Search */}
|
|
<div className="flex items-center">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Zoek cliënt..."
|
|
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|