feat: allow to include the navigation bar in a single line header #3539
Conversation
|
|
Related Previews |
|
Hi @gfellerph as suggested, here is the direct PR |
gfellerph
added
💬 pattern discussion
|
Resolution pattern discussion: thumbs up |
gfellerph
removed
the
💬 pattern discussion
|
| class="row justify-content-center top-navigation m-0 d-md-flex" | ||
| aria-label="navigation" |
There was a problem hiding this comment.
This causes screenreaders to announce "navigation navigation" as the <nav> already prompts a (localized) announcement of navigation. When adding this statically, there is also no chance to localize it.
| aria-label="navigation" |
| @@ -2,32 +2,40 @@ | |||
| <div class="nav-down"> | |||
| <div class="intranet-header"> | |||
| <div class="d-flex align-items-center flex-nowrap"> | |||
| <div class="bg-logo d-sm-block"> | |||
| <div id="logo" class="bg-logo d-sm-block"> | |||
There was a problem hiding this comment.
Why was this id added? There is a chance of this id already being in use by a project, which could cause hard to find errors. If this id is necessary, we should prefix it with post- or an even more specific prefix. Otherwise, please remove it.
Same goes for the other instances where ids were added.
|
|
||
| <nav | ||
| *ngIf="condenseHeader && hasNavbar" | ||
| aria-label="navigation" |
There was a problem hiding this comment.
This causes screenreaders to announce "navigation navigation" as the <nav> already prompts a (localized) announcement of navigation. When adding this statically, there is also no chance to localize it.
| aria-label="navigation" |
| private getAvailableNavWidth(): number { | ||
| if (!this.condenseHeader) { | ||
| return document.documentElement.scrollWidth; | ||
| } | ||
|
|
||
| const elements = [ | ||
| this.logoElement, | ||
| this.titleElement, | ||
| this.optionHeaderContentElement, | ||
| this.profileMenuElement, | ||
| this.intranetSearchElement, | ||
| ]; | ||
| const totalWidth = elements.reduce((sum, element) => sum + (element?.scrollWidth || 0), 0); | ||
|
|
||
| return document.documentElement.scrollWidth - totalWidth; | ||
| } | ||
|
|
There was a problem hiding this comment.
There's a one pixel gap around the logo, possibly caused by the nav items that are 2px bigger than the logo.
gfellerph
changed the base branch from
main
to
changeset-release/release/v8
gfellerph
changed the base branch from
changeset-release/release/v8
to
main
|
Notice for @swisspost/design-system-maintainers, this PR needs to go to main and then needs a cherry pick to |
Allow the option to include the navigation bar in a single line as a condensed header. Instead of 2 lines only one (the top one) will contains the logo, title and navigation bar, as well as the settings. As discussed with Debray Alize and Gfeller Philipp.
Team NES
Langhard Matthias
Pedroso Yohandris