Navigation
App switcher and user menu components from the unified header. Currently implemented as patterns in css/unified-header.css and includes/header.php.
info
These patterns are documented here for reference. They live in the unified header and are not standalone PHP helpers yet. See Patterns & Templates for the full visual reference.
App Switcher
Global navigation for switching between Workshopr applications. Located in the unified header.
Structure
| Element | Class / Selector | Description |
|---|---|---|
| Trigger | .property-switcher-trigger | Button showing current app icon + name + chevron |
| Dropdown | .property-switcher-dropdown | Two-column grid with phase groups |
| Phase Group | .ps-group | Section with phase label (Learn, Plan & Facilitate, Reflect) |
| App Item | .ps-item | App entry with icon, name, description |
| Active Indicator | .ps-item--active | Highlighted current app with check icon |
Apps by Phase
Learn
Library (workshopr.io)
Tips (tips.workshopr.io)
Podcasts (podcasts.workshopr.io)
Tips (tips.workshopr.io)
Podcasts (podcasts.workshopr.io)
Plan & Facilitate
Planner (planner.workshopr.io)
Coach (coach.workshopr.io)
Interventions (intervention.workshopr.io)
Coach (coach.workshopr.io)
Interventions (intervention.workshopr.io)
Header Theming
Set the active app color using data-property on the header element:
<!-- In header.php, set the current app --> <header class="unified-header" data-property="coach"> <!-- Header content --> </header>
| Value | App | Color |
|---|---|---|
library | Main Site | #E54D4D |
tips | Tips | #F87171 |
podcasts | Podcasts | #BE123C |
planner | Planner | #0284C7 |
coach | Coach | #7C4DFF |
intervention | Interventions | #7C4DFF |
User Menu
Authentication states and account dropdown.
States
| State | Display | Action |
|---|---|---|
| Logged Out | Primary "Sign In" button with app gradient | Opens Google OAuth flow |
| Logged In | Avatar initials + first name + chevron | Opens user dropdown |
Dropdown Items
| Item | Icon | Link |
|---|---|---|
| User info header | — | Name, email, account type badge |
| My Dashboard | dashboard | /dashboard/ |
| Saved Items | bookmark | /dashboard/collections/ |
| Settings | settings | /dashboard/settings/ |
| Sign Out | logout | /api/auth/logout.php |
Account Type Badges
Free
Pro
Team
Files
| File | Purpose |
|---|---|
includes/header.php | Unified header template (contains both patterns) |
css/unified-header.css | All header, app switcher, and user menu styles |
design-system/platform-tokens.css | App color tokens used for theming |