Task 5: Build ClinicalSidebar with navigation and search

- Create ClinicalSidebar component with 7 navigation items - NHS blue active state with 3px left border - Search input with basic filtering (fuse.js integration pending) - Keyboard shortcuts Alt+1-7 for navigation - URL hash routing (#summary, #consultations, etc.) - Session footer with current time - Create PMRInterface container component - Update App.tsx to use 'pmr' phase instead of 'content'
2026-02-11 01:16:19 +00:00
parent 65fc23e79b
commit 4434c6e437
4 changed files with 276 additions and 30 deletions
@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import type { ViewId } from '../types/pmr'
+import { ClinicalSidebar } from './ClinicalSidebar'
+import { PatientBanner } from './PatientBanner'
+
+interface PMRInterfaceProps {
+  children?: React.ReactNode
+}
+
+export function PMRInterface({ children }: PMRInterfaceProps) {
+  const [activeView, setActiveView] = useState<ViewId>(() => {
+    const hash = window.location.hash.slice(1) as ViewId
+    const validViews: ViewId[] = [
+      'summary',
+      'consultations',
+      'medications',
+      'problems',
+      'investigations',
+      'documents',
+      'referrals',
+    ]
+    return validViews.includes(hash) ? hash : 'summary'
+  })
+
+  const handleViewChange = (view: ViewId) => {
+    setActiveView(view)
+  }
+
+  return (
+    <div className="min-h-screen bg-pmr-content">
+      <PatientBanner />
+      <div className="flex">
+        <ClinicalSidebar activeView={activeView} onViewChange={handleViewChange} />
+        <main
+          role="main"
+          className="flex-1 min-h-[calc(100vh-80px)] p-6"
+        >
+          {children ? (
+            children
+          ) : (
+            <div className="bg-white border border-gray-200 rounded p-6">
+              <h1 className="font-inter font-semibold text-lg text-gray-900 capitalize">
+                {activeView} View
+              </h1>
+              <p className="font-inter text-sm text-gray-500 mt-2">
+                Content for {activeView} will be implemented in a separate task.
+              </p>
+            </div>
+          )}
+        </main>
+      </div>
+    </div>
+  )
+}