Skip to content

Commit d276a34

Browse files
alizedebrayalizedebray
committed
Update mainnavigation
1 parent 8a170c7 commit d276a34

File tree

11 files changed

+191
-255
lines changed

11 files changed

+191
-255
lines changed

‎packages/components/src/components/post-icon/readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ some content
3030
- [post-closebutton](../post-closebutton)
3131
- [post-language-switch](../post-language-switch)
3232
- [post-mainnavigation](../post-mainnavigation)
33+
- [post-megadropdown-trigger](../post-megadropdown-trigger)
3334
- [post-rating](../post-rating)
3435

3536
### Graph
@@ -43,6 +44,7 @@ graph TD;
4344
post-closebutton --> post-icon
4445
post-language-switch --> post-icon
4546
post-mainnavigation --> post-icon
47+
post-megadropdown-trigger --> post-icon
4648
post-rating --> post-icon
4749
style post-icon fill:#f9f,stroke:#333,stroke-width:4px
4850
```

‎packages/components/src/components/post-mainnavigation/post-mainnavigation.scss‎

Lines changed: 33 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -1,232 +1,50 @@
1-
@use '@swisspost/design-system-styles/mixins/button';
2-
@use '@swisspost/design-system-styles/mixins/icons';
3-
@use '@swisspost/design-system-styles/mixins/utilities';
41
@use '@swisspost/design-system-styles/mixins/media';
5-
@use '@swisspost/design-system-styles/functions/tokens';
6-
@use '@swisspost/design-system-styles/tokens/elements';
7-
@use '@swisspost/design-system-styles/variables/animation';
8-
@use '@swisspost/design-system-styles/variables/commons';
9-
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
10-
@use '@swisspost/design-system-styles/variables/elevation';
112
@use '@swisspost/design-system-styles/variables/color';
3+
@use '@swisspost/design-system-styles/variables/elevation';
124

13-
@include icons.custom-property('chevrondown');
14-
15-
post-mainnavigation {
16-
// reset links and buttons
17-
post-list-item {
18-
> a {
19-
text-decoration: none;
20-
border-radius: 0;
21-
}
22-
23-
post-megadropdown-trigger button {
24-
@include button.reset-button;
25-
text-align: start;
26-
}
27-
28-
> a,
29-
post-megadropdown-trigger button {
30-
flex: 0 0 fit-content;
31-
white-space: nowrap;
32-
display: flex;
33-
align-items: center;
34-
justify-content: space-between;
35-
36-
&:hover {
37-
color: tokens.get('post-link-hover-fg', elements.$post-link);
38-
}
5+
:host {
6+
display: flex;
7+
user-select: none;
398

40-
&:focus-visible {
41-
border-radius: 4px;
42-
z-index: 2;
43-
}
44-
}
9+
@include media.only(desktop) {
10+
overflow: hidden;
4511
}
12+
}
4613

47-
// styles specific to for the mega-dropdown buttons
48-
> button,
49-
post-megadropdown-trigger button {
50-
&::after {
51-
content: '';
52-
@include icons.mask-image('chevrondown');
53-
height: 1em;
54-
width: 1em;
55-
56-
@include media.only(tablet) {
57-
font-size: 1.5rem;
58-
}
59-
60-
@include media.only(mobile) {
61-
font-size: 1rem;
62-
}
63-
}
64-
65-
@include utilities.high-contrast-mode() {
66-
border: 1px solid ButtonBorder !important;
14+
nav {
15+
scroll-behavior: smooth;
16+
flex: 1 1 auto;
6717

68-
&:hover::after,
69-
&[aria-expanded='true']::after {
70-
color: HighlightText;
71-
}
72-
}
18+
@include media.only(desktop) {
19+
height: var(--post-main-navigation-height);
7320
}
21+
}
7422

75-
// desktop styles
76-
post-header:not([data-burger-menu]) > & {
77-
display: flex;
78-
height: var(--post-main-navigation-height, 0);
79-
background: color.$white;
80-
user-select: none;
81-
82-
nav {
83-
flex: 1 1 auto;
84-
scroll-behavior: smooth;
85-
}
86-
87-
&.scrollable,
88-
&.scrollable nav {
89-
overflow: hidden;
90-
}
91-
92-
.scroll-control {
93-
$icon-size: 1rem;
94-
$button-padding: 1rem;
95-
$button-width: $icon-size + 2 * $button-padding;
96-
97-
z-index: 2;
98-
cursor: pointer;
99-
padding: $button-padding;
100-
background: color.$white;
101-
box-shadow: elevation.$elevation-500;
102-
line-height: 1;
103-
104-
&.scroll-left {
105-
margin-inline-end: -1 * $button-width;
106-
}
107-
108-
&.scroll-right {
109-
margin-inline-start: -1 * $button-width;
110-
}
111-
112-
&.d-none {
113-
display: none;
114-
}
115-
116-
post-icon {
117-
font-size: $icon-size;
118-
}
119-
}
120-
121-
post-list > [role='list'] {
122-
flex-direction: row;
123-
max-width: 100vw;
124-
}
125-
126-
post-list-item {
127-
> a,
128-
> button,
129-
post-megadropdown-trigger button {
130-
position: sticky;
131-
padding-inline: 12px;
132-
height: var(--post-main-navigation-height, 0);
133-
gap: 8px;
134-
font-size: 16px;
135-
136-
.nav-el-active {
137-
font-weight: 700;
138-
text-align: center;
139-
opacity: 0;
140-
}
141-
142-
.nav-el-inactive {
143-
position: absolute;
144-
opacity: 1;
145-
text-align: center;
146-
width: 100%;
147-
inset-inline-start: 0;
148-
}
149-
150-
&.active,
151-
&[aria-current='page']:not(post-megadropdown *),
152-
&[aria-expanded='true'] {
153-
background-color: #050400;
154-
color: #fff;
155-
font-weight: 700;
156-
157-
.nav-el-active {
158-
opacity: 1;
159-
}
160-
161-
.nav-el-inactive {
162-
opacity: 0;
163-
}
164-
}
165-
166-
&:hover {
167-
background-color: #504f4b;
168-
color: #fff;
169-
}
170-
171-
@include media.max(sm) {
172-
font-size: 14px;
173-
}
174-
}
175-
176-
// styles specific to for the mega-dropdown buttons
177-
> button,
178-
post-megadropdown-trigger button {
179-
padding-inline-end: 12px;
180-
transition: border-block-end-color animation.$transition-base-timing;
181-
182-
.nav-el-inactive {
183-
width: calc(100% - 1em - 8px);
184-
}
185-
186-
&::after {
187-
transition: transform animation.$transition-base-timing;
188-
}
23+
.scroll-control {
24+
$icon-size: 1rem;
25+
$button-padding: 1rem;
26+
$button-width: $icon-size + 2 * $button-padding;
18927

190-
&[aria-expanded='true']::after {
191-
transform: rotate(180deg);
192-
}
193-
}
194-
}
28+
z-index: 1;
29+
cursor: pointer;
30+
padding: $button-padding;
31+
background: color.$white;
32+
box-shadow: elevation.$elevation-500;
33+
line-height: 1;
19534

196-
post-megadropdown {
197-
button:not(:is(post-closebutton *)),
198-
a {
199-
@include header-mx.mobile-header-interactive;
200-
}
201-
}
35+
&.scroll-left {
36+
margin-inline-end: -1 * $button-width;
20237
}
20338

204-
// tablet/mobile styles
205-
post-header[data-burger-menu] > & {
206-
nav {
207-
transform: none !important;
208-
}
209-
210-
.scroll-control {
211-
display: none;
212-
}
213-
214-
post-list-item {
215-
> a,
216-
> button,
217-
post-megadropdown-trigger button {
218-
@include header-mx.mobile-header-interactive;
39+
&.scroll-right {
40+
margin-inline-start: -1 * $button-width;
41+
}
21942

220-
.nav-el-inactive {
221-
display: none;
222-
}
223-
}
224-
}
43+
&.d-none {
44+
display: none;
45+
}
22546

226-
// styles specific to for the mega-dropdown buttons
227-
> button::after,
228-
post-megadropdown-trigger button::after {
229-
transform: rotate(-90deg);
230-
}
47+
post-icon {
48+
font-size: $icon-size;
23149
}
23250
}

‎packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Host, h, State, Listen } from '@stencil/core';
1+
import { Component, Element, Host, h, State, Listen } from '@stencil/core';
22
import { version } from '@root/package.json';
33

44
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
@@ -7,9 +7,11 @@ const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar i
77
@Component({
88
tag: 'post-mainnavigation',
99
styleUrl: './post-mainnavigation.scss',
10-
shadow: false,
10+
shadow: true,
1111
})
1212
export class PostMainnavigation {
13+
@Element() private host: HTMLPostMainnavigationElement;
14+
1315
private navbar: HTMLElement;
1416

1517
private scrollRepeatInterval: ReturnType<typeof setInterval>;
@@ -82,19 +84,19 @@ export class PostMainnavigation {
8284
}
8385

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

8890
/**
8991
* Hack to fix the layout shift due to bold text on active elements
9092
*/
9193
private fixLayoutShift() {
9294
this.navigationItems
93-
.filter(item => !item.matches(':has(.nav-el-active)'))
95+
.filter(item => !item.matches(':has(.shown-when-active)'))
9496
.forEach(item => {
9597
item.innerHTML = `
96-
<span class="nav-el-active">${item.innerHTML}</span>
97-
<span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
98+
<span class="shown-when-active">${item.innerHTML}</span>
99+
<span class="shown-when-inactive" aria-hidden="true">${item.innerHTML}</span>
98100
`;
99101
});
100102
}
@@ -140,7 +142,7 @@ export class PostMainnavigation {
140142
}
141143

142144
private scrollRight() {
143-
const scrollRightLeftEdge = document
145+
const scrollRightLeftEdge = this.host.shadowRoot
144146
.querySelector('.scroll-right')
145147
.getBoundingClientRect().left;
146148

@@ -157,7 +159,7 @@ export class PostMainnavigation {
157159
}
158160

159161
private scrollLeft() {
160-
const scrollLeftRightEdge = document
162+
const scrollLeftRightEdge = this.host.shadowRoot
161163
.querySelector('.scroll-left')
162164
.getBoundingClientRect().right;
163165

‎packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
@use '@swisspost/design-system-styles/mixins/media';
2+
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
23

34
post-megadropdown-trigger {
45
width: 100%;
56
position: relative;
7+
8+
button {
9+
@include header-mx.header-control-icon-rotate;
10+
11+
@include media.max(desktop) {
12+
post-icon {
13+
transform: rotate(-90deg);
14+
}
15+
}
16+
}
617
}

0 commit comments

Comments
 (0)