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
This commit is contained in:
Andrew Charlwood
2026-02-06 13:13:03 +00:00
parent 76549420a0
commit bdc1690f0f
5 changed files with 160 additions and 9 deletions
+47
View File
@@ -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"),
],
),
],
),
],
)