Navigation Header
Global navigation bar with Safe Exit button, language switcher, and online status indicator. Always visible at the top of every screen. The Safe Exit button is a trauma-informed feature that immediately navigates away from the app.
Molecules & Atoms Composed
x-molecules.language-switcher— Language selectionx-atoms.button— Safe Exit button (safe-exit variant)x-atoms.icon— Brand logox-atoms.badge— Online/offline status indicator
Accessibility
- Uses
role="banner"semantic landmark. - Navigation uses
aria-label="Main navigation". - Active link uses
aria-current="page". - Safe Exit has descriptive aria-label explaining its purpose.
Trauma-Informed Design
- Safe Exit button is always visible — allows users to quickly leave in unsafe situations.
- Navigates to a neutral external site (Google) to avoid leaving evidence of app usage.
- Subtle gradient background provides calm without distraction.
- Online status badge gives reassurance that data will be transmitted.