Skip to content

Commit fe9eb4b

Browse files
alizedebrayalizedebray
committed
Fix width issue with navigation overflow
1 parent 903a40e commit fe9eb4b

File tree

4 files changed

+166
-43
lines changed

4 files changed

+166
-43
lines changed

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

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,18 @@
99
box-sizing: border-box;
1010
}
1111

12-
:host {
13-
display: block;
14-
position: sticky;
15-
inset-block-start: var(--post-header-top);
16-
z-index: commons.$zindex-header;
17-
}
18-
1912
:host,
2013
.global-header,
2114
.local-header {
2215
transition: inset-block-start animation.$transition-time-simple animation.$transition-easing-default;
2316
}
2417

18+
.global-header,
19+
.local-header,
20+
.burger-menu {
21+
box-shadow: elevation.$elevation-300;
22+
}
23+
2524
.global-header,
2625
.sliding-controls,
2726
.local-header,
@@ -30,16 +29,14 @@
3029
align-items: center;
3130
justify-content: space-between;
3231
gap: var(--post-header-gap);
33-
34-
.spacer {
35-
flex-grow: 1;
36-
}
3732
}
3833

39-
.global-header,
40-
.local-header,
41-
.burger-menu {
42-
box-shadow: elevation.$elevation-300;
34+
:host {
35+
container-type: inline-size;
36+
display: block;
37+
position: sticky;
38+
inset-block-start: var(--post-header-top);
39+
z-index: commons.$zindex-header;
4340
}
4441

4542
.global-header {
@@ -51,12 +48,6 @@
5148
padding-inline-start: var(--post-global-header-padding-inline-start);
5249
padding-inline-end: var(--post-global-header-padding-inline-end);
5350

54-
> .sliding-controls {
55-
flex-grow: 1;
56-
position: relative;
57-
inset-block-start: var(--post-global-controls-top);
58-
}
59-
6051
&:has(~ .local-header:not(.no-title.no-navigation)),
6152
&:has(~ .burger-menu.extended) {
6253
box-shadow: none;
@@ -70,6 +61,21 @@
7061
max-height: 100%;
7162
margin-inline-end: 1.25rem;
7263
}
64+
65+
.sliding-controls {
66+
flex-grow: 1;
67+
justify-content: flex-end;
68+
position: relative;
69+
inset-block-start: var(--post-global-controls-top);
70+
}
71+
72+
.target-group {
73+
margin-inline-end: auto;
74+
}
75+
76+
&.no-target-group .target-group {
77+
display: none;
78+
}
7379
}
7480

7581
.local-header {
@@ -91,33 +97,43 @@
9197
display: none;
9298
}
9399

100+
&:has(.navigation.megadropdown-open),
101+
&:has(~ .burger-menu.extended) {
102+
box-shadow: none;
103+
104+
&::after {
105+
content: '';
106+
display: block;
107+
position: absolute;
108+
inset-inline: 0;
109+
inset-block-end: 0;
110+
height: 1px;
111+
background-color: #e1e0dc;
112+
}
113+
}
114+
94115
.navigation {
95116
flex: 1 0 100%;
96117
height: var(--post-main-navigation-height);
97118
margin-inline-start: calc(-1 * var(--post-local-header-padding-inline-start));
98-
max-width: 100vw;
119+
max-width: 100cqw;
99120
}
100121

101122
&.no-navigation .navigation {
102123
display: none;
103124
}
104125

105-
&.no-navigation-controls .navigation {
106-
margin-inline-end: calc(-1 * var(--post-local-header-padding-inline-end));
126+
.navigation-controls {
127+
flex: 0 0 auto;
107128
}
108129

109-
&:has(.navigation.megadropdown-open),
110-
&:has(~ .burger-menu.extended) {
111-
box-shadow: none;
130+
&.no-navigation-controls {
131+
.navigation {
132+
margin-inline-end: calc(-1 * var(--post-local-header-padding-inline-end));
133+
}
112134

113-
&::after {
114-
content: '';
115-
display: block;
116-
position: absolute;
117-
inset-inline: 0;
118-
inset-block-end: 0;
119-
height: 1px;
120-
background-color: #e1e0dc;
135+
.navigation-controls {
136+
display: none;
121137
}
122138
}
123139
}

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class PostHeader {
6666
@State() device: Device = breakpoint.get('device');
6767
@State() hasNavigation: boolean = false;
6868
@State() hasNavigationControls: boolean = false;
69+
@State() hasTargetGroup: boolean = false;
6970
@State() hasTitle: boolean = false;
7071
@State() burgerMenuExtended: boolean = false;
7172
@State() megadropdownOpen: boolean = false;
@@ -124,6 +125,7 @@ export class PostHeader {
124125

125126
this.checkNavigationExistence();
126127
this.checkNavigationControlsExistence();
128+
this.checkTargetGroupExistence();
127129
this.checkTitleExistence();
128130
this.switchLanguageSwitchMode();
129131

@@ -177,6 +179,10 @@ export class PostHeader {
177179
this.host.querySelectorAll('[slot="navigation-controls"]').length > 0;
178180
}
179181

182+
private checkTargetGroupExistence(): void {
183+
this.hasTargetGroup = this.host.querySelectorAll('[slot="target-group"]').length > 0;
184+
}
185+
180186
private checkTitleExistence(): void {
181187
this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
182188
}
@@ -225,8 +231,8 @@ export class PostHeader {
225231

226232
@EventFrom('post-megadropdown')
227233
private megadropdownStateHandler = (event: CustomEvent) => {
228-
this.megadropdownOpen = event.detail.isVisible;
229-
};
234+
this.megadropdownOpen = event.detail.isVisible;
235+
};
230236

231237
// Get all the focusable elements in the post-header burger menu
232238
private getFocusableElements() {
@@ -382,8 +388,7 @@ export class PostHeader {
382388
return (
383389
<div class={{ 'navigation': true, 'megadropdown-open': this.megadropdownOpen }}>
384390
{mainNavigation}
385-
<div class="spacer"></div>
386-
{navigationControls}
391+
<div class="navigation-controls">{navigationControls}</div>
387392
</div>
388393
);
389394
}
@@ -413,13 +418,24 @@ export class PostHeader {
413418
render() {
414419
return (
415420
<Host data-version={version} data-color-scheme="light" data-burger-menu={this.hasBurgerMenu}>
416-
<div class="global-header">
421+
<div
422+
class={{
423+
'global-header': true,
424+
'no-target-group': !this.hasTargetGroup,
425+
}}
426+
>
417427
<div class="logo">
418428
<slot name="post-logo"></slot>
419429
</div>
420430
<div class="sliding-controls">
421-
{this.device === 'desktop' && <slot name="target-group"></slot>}
422-
<div class="spacer"></div>
431+
{this.device === 'desktop' && (
432+
<div class="target-group">
433+
<slot
434+
name="target-group"
435+
onSlotchange={() => this.checkTargetGroupExistence()}
436+
></slot>
437+
</div>
438+
)}
423439
<slot name="global-controls"></slot>
424440
{!this.hasBurgerMenu && [
425441
<slot name="meta-navigation"></slot>,
@@ -437,6 +453,7 @@ export class PostHeader {
437453
class={{
438454
'local-header': true,
439455
'no-title': !this.hasTitle,
456+
'no-target-group': !this.hasTargetGroup,
440457
'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
441458
'no-navigation-controls': !this.hasNavigationControls,
442459
}}

‎packages/components/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ <h2 slot="megadropdown-title">Pakete title</h2>
146146
<post-list>
147147
<h3>Pakete senden</h3>
148148
<post-list-item slot="post-list-item"
149-
><a aria-current="page" href="/sch">Pakete Schweiz</a></post-list-item
149+
><a href="/sch">Pakete Schweiz</a></post-list-item
150150
>
151151
<post-list-item slot="post-list-item"
152152
><a href="/kl">Kleinwaren Ausland</a></post-list-item

‎packages/documentation/src/stories/components/header/renderers/main-navigation.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,96 @@ export function renderMainnavigation() {
1010
<post-list-item slot="post-list-item">
1111
<a href="/letters">Letters</a>
1212
</post-list-item>
13+
<post-list-item slot="post-list-item">
14+
<a href="/letters">Letters</a>
15+
</post-list-item>
16+
<post-list-item slot="post-list-item">
17+
<a href="/letters">Letters</a>
18+
</post-list-item>
19+
<post-list-item slot="post-list-item">
20+
<a href="/letters">Letters</a>
21+
</post-list-item>
22+
<post-list-item slot="post-list-item">
23+
<a href="/letters">Letters</a>
24+
</post-list-item>
25+
<post-list-item slot="post-list-item">
26+
<a href="/letters">Letters</a>
27+
</post-list-item>
28+
<post-list-item slot="post-list-item">
29+
<a href="/letters">Letters</a>
30+
</post-list-item>
31+
<post-list-item slot="post-list-item">
32+
<a href="/letters">Letters</a>
33+
</post-list-item>
34+
<post-list-item slot="post-list-item">
35+
<a href="/letters">Letters</a>
36+
</post-list-item>
37+
<post-list-item slot="post-list-item">
38+
<a href="/letters">Letters</a>
39+
</post-list-item>
40+
<post-list-item slot="post-list-item">
41+
<a href="/letters">Letters</a>
42+
</post-list-item>
43+
<post-list-item slot="post-list-item">
44+
<a href="/letters">Letters</a>
45+
</post-list-item>
46+
<post-list-item slot="post-list-item">
47+
<a href="/letters">Letters</a>
48+
</post-list-item>
49+
<post-list-item slot="post-list-item">
50+
<a href="/letters">Letters</a>
51+
</post-list-item>
52+
<post-list-item slot="post-list-item">
53+
<a href="/letters">Letters</a>
54+
</post-list-item>
55+
<post-list-item slot="post-list-item">
56+
<a href="/letters">Letters</a>
57+
</post-list-item>
58+
<post-list-item slot="post-list-item">
59+
<a href="/letters">Letters</a>
60+
</post-list-item>
61+
<post-list-item slot="post-list-item">
62+
<a href="/letters">Letters</a>
63+
</post-list-item>
64+
<post-list-item slot="post-list-item">
65+
<a href="/letters">Letters</a>
66+
</post-list-item>
67+
<post-list-item slot="post-list-item">
68+
<a href="/letters">Letters</a>
69+
</post-list-item>
70+
<post-list-item slot="post-list-item">
71+
<a href="/letters">Letters</a>
72+
</post-list-item>
73+
<post-list-item slot="post-list-item">
74+
<a href="/letters">Letters</a>
75+
</post-list-item>
76+
<post-list-item slot="post-list-item">
77+
<a href="/letters">Letters</a>
78+
</post-list-item>
79+
<post-list-item slot="post-list-item">
80+
<a href="/letters">Letters</a>
81+
</post-list-item>
82+
<post-list-item slot="post-list-item">
83+
<a href="/letters">Letters</a>
84+
</post-list-item>
85+
<post-list-item slot="post-list-item">
86+
<a href="/letters">Letters</a>
87+
</post-list-item>
88+
<post-list-item slot="post-list-item">
89+
<a href="/letters">Letters</a>
90+
</post-list-item>
91+
<post-list-item slot="post-list-item">
92+
<a href="/letters">Letters</a>
93+
</post-list-item>
94+
<post-list-item slot="post-list-item">
95+
<a href="/letters">Letters</a>
96+
</post-list-item>
97+
<post-list-item slot="post-list-item">
98+
<a href="/letters">Letters</a>
99+
</post-list-item>
100+
<post-list-item slot="post-list-item">
101+
<a href="/letters">Letters</a>
102+
</post-list-item>
13103
<post-list-item slot="post-list-item">
14104
<a href="/packages">Packages</a>
15105
</post-list-item>

0 commit comments

Comments
 (0)