feat: header parity with frontend-component-header#225
Merged
Conversation
Closed
4 tasks
This was referenced Apr 14, 2026
diana-villalvazo-wgu
approved these changes
Apr 15, 2026
Contributor
diana-villalvazo-wgu
left a comment
diana-villalvazo-wgu
left a comment
There was a problem hiding this comment.
LGTM and looks better now 👍
Bring the shell header closer to visual parity with the old frontend-component-header used by legacy MFEs. The logo now links to whichever route claims the homeRole. Active nav links get highlighted with the same dark navy background the old header used, matching location.pathname against the link URL with trailing-slash normalization. The user dropdown replaces the generic Person icon and DropdownButton with Paragon's AvatarButton inside a Dropdown, styled as outline-primary. The user's profile image is shown when available, with Paragon's default avatar fallback otherwise. Header and page content now use Container fluid size="xl" instead of fixed padding, so margins align at all viewport widths. The root / redirect is now conditional: it only applies when an app claims the home role, and is appended last so an app with its own / route takes priority. BREAKING CHANGE: route handles use a roles array instead of a single role string. Co-Authored-By: Claude <noreply@anthropic.com>
arbrandes
force-pushed
the
arbrandes/fix-the-header
branch
from
eec30a2 to
5d48196
Compare
|
🎉 This PR is included in version 1.0.0-alpha.26 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Brings the shell header closer to visual parity with the old
frontend-component-headerused by the legacy MFEs. This addresses the items tracked in #223.This cascaded into a bunch of other improvements:
The logo now links to whichever route claims the well-known
homeRole, with a fallback redirect at/.If the
homeRoleis claimed, users that land at/are redirected to it.Active nav links get highlighted with the same dark navy background the old header used, matching
location.pathnameagainst the link URL (with trailing-slash normalization).The user dropdown replaces the generic
Personicon andDropdownButtonwith Paragon'sAvatarButtoninside aDropdown, styled asoutline-primaryto match the old design. The user's profile image is shown when available, with Paragon's default avatar fallback otherwise.Header content now uses
Container fluid size="xl"instead of fixed padding, so left/right margins align with the main content area at all viewport widths. The same pattern replaces the oldpx-3/pr-3on both desktop and mobile layouts.BREAKING CHANGE: Route handles switch from a single
rolestring to arolesarray so a route can serve multiple purposes.Screenshots
Figure 1. Before
Figure 2. After
LLM usage notice
Built with assistance from Claude.