feat: add header and sidebar components for Dash layout (Task 2.1)

- header.py: NHS branded top bar with logo, title, breadcrumb,
  data freshness indicators (record count + last updated with IDs
  for callback updates)
- sidebar.py: Navigation with 7 items across Analysis/Reports
  sections, SVG icons via data URI, Drug Selection and Indications
  items have IDs for drawer open callbacks (Phase 4)
- app.py: Assembles header + sidebar + main content placeholder
- nhs.css: Added .sidebar__icon rule for img-based SVG icons

IMPLEMENTATION_PLAN.md

@@ -119,16 +119,16 @@ Drawer selection → update_drug_selection → app-state store → load_pathway_
 ## Phase 2: Static Layout
 
 ### 2.1 Header + sidebar components
-- [ ] Create `dash_app/components/header.py` — `make_header()` function returning Dash HTML component
+- [x] Create `dash_app/components/header.py` — `make_header()` function returning Dash HTML component
   - NHS logo, title "HCD Analysis", breadcrumb, data freshness indicator (status dot + record count + last updated)
   - Use CSS classes from `nhs.css`: `.top-header`, `.top-header__brand`, `.top-header__logo`, `.top-header__title`, etc.
   - Record count and last updated are `html.Span` with IDs for callback updates: `id="header-record-count"`, `id="header-last-updated"`
-- [ ] Create `dash_app/components/sidebar.py` — `make_sidebar()` function
+- [x] Create `dash_app/components/sidebar.py` — `make_sidebar()` function
   - Navigation items matching 01_nhs_classic.html sidebar (Pathway Overview active, Drug Selection, Trust Selection, Directory Selection, Indications, Cost Analysis, Export Data)
-  - SVG icons as raw HTML (copy from 01_nhs_classic.html)
+  - SVG icons via data URI img elements (Dash doesn't support inline SVGs natively)
-  - "Drug Selection" and "Indications" items trigger the dmc.Drawer (via callback, wired in Phase 4)
+  - "Drug Selection" (`id="sidebar-drug-selection"`) and "Indications" (`id="sidebar-indications"`) items have IDs for drawer callbacks (Phase 4)
   - Footer: "NHS Norfolk & Waveney ICB / High Cost Drugs Programme"
-- **Checkpoint**: Components render in browser with correct NHS styling
+- **Checkpoint**: Components render in browser with correct NHS styling ✓
 
 ### 2.2 Main content area: KPI row + filter bar + chart card
 - [ ] Create `dash_app/components/kpi_row.py` — `make_kpi_row()` function

dash_app/app.py

@@ -2,6 +2,9 @@
 from dash import Dash, html, dcc
 import dash_mantine_components as dmc
 
+from dash_app.components.header import make_header
+from dash_app.components.sidebar import make_sidebar
+
 app = Dash(
     __name__,
     suppress_callback_exceptions=True,
@@ -21,13 +24,17 @@ app.layout = dmc.MantineProvider(
         dcc.Store(id="chart-data", storage_type="memory"),
         dcc.Store(id="reference-data", storage_type="session"),
 
-        # Placeholder layout — will be replaced by assembled components
+        # Page structure
-        html.Div(
+        make_header(),
+        make_sidebar(),
+        html.Main(
             className="main",
-            style={"marginLeft": "0", "marginTop": "0"},
             children=[
                 html.H1("HCD Analysis", style={"color": "#003087"}),
-                html.P("Dash application scaffolding complete. Components will be added in subsequent phases."),
+                html.P(
+                    "Layout scaffolding with header and sidebar. "
+                    "KPIs, filter bar, and chart card will be added in Task 2.2."
+                ),
             ],
         ),
     ],

dash_app/assets/nhs.css

@@ -101,6 +101,7 @@ body {
     font-weight: 600;
 }
 .sidebar__item svg { width: 18px; height: 18px; flex-shrink: 0; }
+.sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; }
 .sidebar__footer {
     margin-top: auto; padding: 16px 20px;
     border-top: 1px solid var(--nhs-pale-grey);

dash_app/components/header.py

@@ -0,0 +1,47 @@
+"""Top header bar component matching 01_nhs_classic.html design."""
+from dash import html
+
+
+def make_header():
+    """Return the fixed top header with NHS branding and data freshness indicators."""
+    return html.Header(
+        className="top-header",
+        children=[
+            # Brand area (NHS logo + title) with angled clip-path
+            html.Div(
+                className="top-header__brand",
+                children=[
+                    html.Div("NHS", className="top-header__logo"),
+                    html.Div(
+                        html.Div("HCD Analysis", className="top-header__title"),
+                    ),
+                ],
+            ),
+            # Breadcrumb
+            html.Div(
+                className="top-header__breadcrumb",
+                children=[
+                    "Dashboard \u203A ",
+                    html.Strong("Pathway Analysis"),
+                ],
+            ),
+            # Right side: status dot + record count + last updated
+            html.Div(
+                className="top-header__right",
+                children=[
+                    html.Span(
+                        children=[
+                            html.Span(className="status-dot"),
+                            html.Span("...", id="header-record-count"),
+                        ],
+                    ),
+                    html.Span(
+                        children=[
+                            "Last updated: ",
+                            html.Span("...", id="header-last-updated"),
+                        ],
+                    ),
+                ],
+            ),
+        ],
+    )

dash_app/components/sidebar.py

@@ -0,0 +1,96 @@
+"""Left sidebar navigation component matching 01_nhs_classic.html design."""
+from urllib.parse import quote as url_quote
+
+from dash import html
+
+
+def _svg_icon(svg_body):
+    """Wrap an SVG body string into an html.Img using a data URI.
+
+    This avoids needing dash-svg or dangerouslySetInnerHTML.
+    The SVG icons are copied from 01_nhs_classic.html.
+    """
+    svg = (
+        f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" '
+        f'fill="none" stroke="currentColor" stroke-width="2">{svg_body}</svg>'
+    )
+    return html.Img(
+        src=f"data:image/svg+xml,{url_quote(svg)}",
+        className="sidebar__icon",
+    )
+
+
+# SVG icon bodies from 01_nhs_classic.html
+_ICONS = {
+    "pathway": '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>',
+    "drug": '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>',
+    "trust": '<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>',
+    "directory": '<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>',
+    "indication": '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/>',
+    "cost": '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>',
+    "export": '<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
+}
+
+
+def make_sidebar():
+    """Return the fixed left sidebar navigation."""
+    return html.Nav(
+        className="sidebar",
+        **{"aria-label": "Main navigation"},
+        children=[
+            # Analysis section
+            html.Div(
+                className="sidebar__section",
+                children=[
+                    html.Div("Analysis", className="sidebar__label"),
+                    _sidebar_item("Pathway Overview", "pathway", active=True),
+                    _sidebar_item(
+                        "Drug Selection", "drug", item_id="sidebar-drug-selection"
+                    ),
+                    _sidebar_item("Trust Selection", "trust"),
+                    _sidebar_item("Directory Selection", "directory"),
+                    _sidebar_item(
+                        "Indications", "indication", item_id="sidebar-indications"
+                    ),
+                ],
+            ),
+            # Reports section
+            html.Div(
+                className="sidebar__section",
+                children=[
+                    html.Div("Reports", className="sidebar__label"),
+                    _sidebar_item("Cost Analysis", "cost"),
+                    _sidebar_item("Export Data", "export"),
+                ],
+            ),
+            # Footer
+            html.Div(
+                className="sidebar__footer",
+                children=[
+                    "NHS Norfolk & Waveney ICB",
+                    html.Br(),
+                    "High Cost Drugs Programme",
+                ],
+            ),
+        ],
+    )
+
+
+def _sidebar_item(label, icon_key, active=False, item_id=None):
+    """Create a single sidebar navigation item."""
+    class_name = "sidebar__item"
+    if active:
+        class_name += " sidebar__item--active"
+
+    props = {"className": class_name}
+    if item_id:
+        props["id"] = item_id
+        props["n_clicks"] = 0
+
+    return html.A(
+        **props,
+        children=[
+            _svg_icon(_ICONS[icon_key]),
+            label,
+        ],
+    )