🧩 UI Component & Standalone Preview • assets/includes/header.html

Harshya Global Header & Navigation Architecture

This component serves dual roles: it is dynamically injected into portal pages via include_loader.js (extracting [data-include-fragment="header"]) and operates as a standalone interactive testing workbench when opened directly at /assets/includes/header.

🔍 Preview Search UI Component ⚓ Preview Footer Component 🏠 Return to Portal Home

Component Capabilities & Accessibility Standards

1. Root-Relative Clean URLs

All navigation links and emblem assets use root-relative paths (/geography#jammu, /highway_status_radar, /assets/images/harshya_logo.png) so they resolve cleanly from any directory depth.

2. WCAG 2.2 AA Focus & ARIA

Includes a keyboard-accessible .skip-link, aria-expanded and aria-controls="drawer" state management, focus return on close, and Escape key dismissal.

3. Dual-Mode Fragment Extraction

Wrapped in data-include-fragment="header" so include_loader.js injects only the topbar and drawer markup when hydrating pages across the portal.