Skip to content

chore(components): simplify post-mainnavigation #6706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: header-spacing-train
Choose a base branch
from
Open

chore(components): simplify post-mainnavigation #6706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/components/src/components/post-icon/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ some content
- [post-closebutton](../post-closebutton)
- [post-language-switch](../post-language-switch)
- [post-mainnavigation](../post-mainnavigation)
- [post-megadropdown-trigger](../post-megadropdown-trigger)
- [post-rating](../post-rating)

### Graph
Expand All @@ -43,6 +44,7 @@ graph TD;
post-closebutton --> post-icon
post-language-switch --> post-icon
post-mainnavigation --> post-icon
post-megadropdown-trigger --> post-icon
post-rating --> post-icon
style post-icon fill:#f9f,stroke:#333,stroke-width:4px
```
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/post-language-switch/post-language-switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ tokens.$default-map: components.$post-button;
}

.post-language-switch-trigger {
@include header-mx.header-control-base;
@include header-mx.header-control-icon-rotate;
@include header-mx.header-control-styles;
@include header-mx.rotation-chevron-control-styles;
text-transform: uppercase;
cursor: pointer;
}
Expand Down
248 changes: 33 additions & 215 deletions packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,232 +1,50 @@
@use '@swisspost/design-system-styles/mixins/button';
@use '@swisspost/design-system-styles/mixins/icons';
@use '@swisspost/design-system-styles/mixins/utilities';
@use '@swisspost/design-system-styles/mixins/media';
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/tokens/elements';
@use '@swisspost/design-system-styles/variables/animation';
@use '@swisspost/design-system-styles/variables/commons';
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
@use '@swisspost/design-system-styles/variables/elevation';
@use '@swisspost/design-system-styles/variables/color';
@use '@swisspost/design-system-styles/variables/elevation';

@include icons.custom-property('chevrondown');

post-mainnavigation {
// reset links and buttons
post-list-item {
> a {
text-decoration: none;
border-radius: 0;
}

post-megadropdown-trigger button {
@include button.reset-button;
text-align: start;
}

> a,
post-megadropdown-trigger button {
flex: 0 0 fit-content;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: space-between;

&:hover {
color: tokens.get('post-link-hover-fg', elements.$post-link);
}
:host {
display: flex;
user-select: none;

&:focus-visible {
border-radius: 4px;
z-index: 2;
}
}
@include media.only(desktop) {
overflow: hidden;
}
}

// styles specific to for the mega-dropdown buttons
> button,
post-megadropdown-trigger button {
&::after {
content: '';
@include icons.mask-image('chevrondown');
height: 1em;
width: 1em;

@include media.only(tablet) {
font-size: 1.5rem;
}

@include media.only(mobile) {
font-size: 1rem;
}
}

@include utilities.high-contrast-mode() {
border: 1px solid ButtonBorder !important;
nav {
scroll-behavior: smooth;
flex: 1 1 auto;

&:hover::after,
&[aria-expanded='true']::after {
color: HighlightText;
}
}
@include media.only(desktop) {
height: var(--post-main-navigation-height);
}
}

// desktop styles
post-header:not([data-burger-menu]) > & {
display: flex;
height: var(--post-main-navigation-height, 0);
background: color.$white;
user-select: none;

nav {
flex: 1 1 auto;
scroll-behavior: smooth;
}

&.scrollable,
&.scrollable nav {
overflow: hidden;
}

.scroll-control {
$icon-size: 1rem;
$button-padding: 1rem;
$button-width: $icon-size + 2 * $button-padding;

z-index: 2;
cursor: pointer;
padding: $button-padding;
background: color.$white;
box-shadow: elevation.$elevation-500;
line-height: 1;

&.scroll-left {
margin-inline-end: -1 * $button-width;
}

&.scroll-right {
margin-inline-start: -1 * $button-width;
}

&.d-none {
display: none;
}

post-icon {
font-size: $icon-size;
}
}

post-list > [role='list'] {
flex-direction: row;
max-width: 100vw;
}

post-list-item {
> a,
> button,
post-megadropdown-trigger button {
position: sticky;
padding-inline: 12px;
height: var(--post-main-navigation-height, 0);
gap: 8px;
font-size: 16px;

.nav-el-active {
font-weight: 700;
text-align: center;
opacity: 0;
}

.nav-el-inactive {
position: absolute;
opacity: 1;
text-align: center;
width: 100%;
inset-inline-start: 0;
}

&.active,
&[aria-current='page']:not(post-megadropdown *),
&[aria-expanded='true'] {
background-color: #050400;
color: #fff;
font-weight: 700;

.nav-el-active {
opacity: 1;
}

.nav-el-inactive {
opacity: 0;
}
}

&:hover {
background-color: #504f4b;
color: #fff;
}

@include media.max(sm) {
font-size: 14px;
}
}

// styles specific to for the mega-dropdown buttons
> button,
post-megadropdown-trigger button {
padding-inline-end: 12px;
transition: border-block-end-color animation.$transition-base-timing;

.nav-el-inactive {
width: calc(100% - 1em - 8px);
}

&::after {
transition: transform animation.$transition-base-timing;
}
.scroll-control {
$icon-size: 1rem;
$button-padding: 1rem;
$button-width: $icon-size + 2 * $button-padding;

&[aria-expanded='true']::after {
transform: rotate(180deg);
}
}
}
z-index: 1;
cursor: pointer;
padding: $button-padding;
background: color.$white;
box-shadow: elevation.$elevation-500;
line-height: 1;

post-megadropdown {
button:not(:is(post-closebutton *)),
a {
@include header-mx.mobile-header-interactive;
}
}
&.scroll-left {
margin-inline-end: -1 * $button-width;
}

// tablet/mobile styles
post-header[data-burger-menu] > & {
nav {
transform: none !important;
}

.scroll-control {
display: none;
}

post-list-item {
> a,
> button,
post-megadropdown-trigger button {
@include header-mx.mobile-header-interactive;
&.scroll-right {
margin-inline-start: -1 * $button-width;
}

.nav-el-inactive {
display: none;
}
}
}
&.d-none {
display: none;
}

// styles specific to for the mega-dropdown buttons
> button::after,
post-megadropdown-trigger button::after {
transform: rotate(-90deg);
}
post-icon {
font-size: $icon-size;
}
}
18 changes: 10 additions & 8 deletions packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Host, h, State, Listen } from '@stencil/core';
import { Component, Element, Host, h, State, Listen } from '@stencil/core';
import { version } from '@root/package.json';

const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
Expand All @@ -7,9 +7,11 @@ const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar i
@Component({
tag: 'post-mainnavigation',
styleUrl: './post-mainnavigation.scss',
shadow: false,
shadow: true,
})
export class PostMainnavigation {
@Element() private host: HTMLPostMainnavigationElement;

private navbar: HTMLElement;

private scrollRepeatInterval: ReturnType<typeof setInterval>;
Expand Down Expand Up @@ -82,19 +84,19 @@ export class PostMainnavigation {
}

private get navigationItems(): HTMLElement[] {
return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
return Array.from(this.host.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
}

/**
* Hack to fix the layout shift due to bold text on active elements
*/
private fixLayoutShift() {
this.navigationItems
.filter(item => !item.matches(':has(.nav-el-active)'))
.filter(item => !item.matches(':has(.shown-when-inactive)'))
.forEach(item => {
item.innerHTML = `
<span class="nav-el-active">${item.innerHTML}</span>
<span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
<span class="shown-when-inactive" aria-hidden="true">${item.innerHTML}</span>
${item.innerHTML}
`;
});
}
Expand Down Expand Up @@ -140,7 +142,7 @@ export class PostMainnavigation {
}

private scrollRight() {
const scrollRightLeftEdge = document
const scrollRightLeftEdge = this.host.shadowRoot
.querySelector('.scroll-right')
.getBoundingClientRect().left;

Expand All @@ -157,7 +159,7 @@ export class PostMainnavigation {
}

private scrollLeft() {
const scrollLeftRightEdge = document
const scrollLeftRightEdge = this.host.shadowRoot
.querySelector('.scroll-left')
.getBoundingClientRect().right;

Expand Down
11 changes: 11 additions & 0 deletions packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
@use '@swisspost/design-system-styles/mixins/media';
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;

post-megadropdown-trigger {
width: 100%;
position: relative;

button {
@include header-mx.rotation-chevron-control-styles;

@include media.max(desktop) {
post-icon {
transform: rotate(-90deg);
}
}
}
}
Loading