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:
@@ -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"),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
Reference in New Issue
Block a user