Skip to content

Commit 79ca44c

Browse files
MoritzWeber0MoritzWeber0
authored
feat: Add operators to navbar & merge dropdown implementations (#309)
Resolves #292
1 parent 4a18711 commit 79ca44c

15 files changed

Lines changed: 358 additions & 251 deletions

File tree

‎assets/js/countrySelector.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎assets/js/dropdown.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
function registerEventListeners(id) {
3+
const button = document.querySelector(`#${id}-button`);
4+
const dropdown = document.querySelector(`#${id}-dropdown`);
5+
6+
button.addEventListener('click', function() {
7+
const expanded = button.getAttribute('aria-expanded') === 'true';
8+
button.setAttribute('aria-expanded', !expanded);
9+
dropdown.setAttribute('aria-hidden', expanded);
10+
});
11+
12+
document.addEventListener('click', function(event) {
13+
if (!button.contains(event.target) && !dropdown.contains(event.target)) {
14+
button.setAttribute('aria-expanded', 'false');
15+
dropdown.setAttribute('aria-hidden', 'true');
16+
}
17+
});
18+
19+
document.addEventListener('keydown', function(event) {
20+
if (event.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') {
21+
button.setAttribute('aria-expanded', 'false');
22+
dropdown.setAttribute('aria-hidden', 'true');
23+
}
24+
});
25+
}
26+
27+
registerEventListeners('language-switcher');
28+
registerEventListeners('navbar-country-selection');
29+
registerEventListeners('navbar-operator-selection');
30+
});

‎assets/js/languageSwitcher.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎assets/js/main.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import './mobileMenu.js';
2-
import './countrySelector.js';
32
import './resizeObserver.js';
43
import './mediaqueries.js';
54
import './highlightHeadline.js';
65
import './anchorlinks.js';
7-
import './languageSwitcher.js';
6+
import './dropdown.js';
87
import './darkmode.js';
98
import './interactiveMap.js';

‎assets/js/resizeObserver.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,13 @@ import * as mq from './mediaqueries';
33
function resizeObserver() {
44
const navContainer = document.querySelector('.o-header__nav');
55
const menuButton = document.querySelector('.o-nav__menu-button');
6-
const countryContainer = document.querySelector('.o-header__item-countries');
76

87
window.addEventListener("resize", () => {
9-
108
//close mobile menu on viewports >= md
119
if (window.matchMedia(mq.minMD).matches) {
1210
navContainer.classList.remove("o-header__nav--open");
1311
menuButton.setAttribute('aria-expanded', false);
1412
}
15-
16-
//close country selector on viewports < md
17-
if (window.matchMedia(mq.maxSM).matches) {
18-
countryContainer.classList.remove("o-header__item-countries--open");
19-
}
2013
});
2114
}
2215

‎assets/sass/dropdown.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.o-dropdown {
2+
position: relative;
3+
}
4+
5+
.o-dropdown__button {
6+
border: 0;
7+
background-color: transparent;
8+
color: var(--color-body);
9+
display: flex;
10+
font-weight: 500;
11+
padding: 1rem;
12+
gap: 0.5rem;
13+
align-items: center;
14+
position: relative;
15+
16+
&:hover,
17+
&:focus {
18+
color: var(--link-hovered);
19+
transition: all .3s ease;
20+
21+
& > :not(.material-symbols-rounded) {
22+
text-decoration: underline;
23+
}
24+
}
25+
}
26+
27+
.o-dropdown__icon {
28+
font-size: 0.7rem;
29+
transition: transform 0.2s;
30+
}
31+
32+
.o-dropdown__button[aria-expanded="true"] .o-dropdown__icon {
33+
transform: rotate(180deg);
34+
}
35+
36+
.o-dropdown__menu {
37+
display: none;
38+
position: absolute;
39+
background: var(--bg-default);
40+
border-radius: var(--border-radius-m);
41+
list-style: none;
42+
width: min-content;
43+
margin-bottom: 0;
44+
padding-left: 0;
45+
box-shadow: var(--box-shadow);
46+
z-index: 200;
47+
border: var(--border);
48+
49+
&--above {
50+
bottom: 100%;
51+
top: auto;
52+
}
53+
54+
&--below {
55+
top: 100%;
56+
bottom: auto;
57+
}
58+
59+
&--right {
60+
right: 0;
61+
}
62+
}
63+
64+
.o-dropdown__button[aria-expanded="true"] + .o-dropdown__menu {
65+
display: grid;
66+
}
67+
68+
.o-dropdown__item {
69+
margin: 0.8rem 3rem;
70+
}
71+
72+
.o-dropdown__link {
73+
text-decoration: none;
74+
font-weight: 400;
75+
white-space: nowrap;
76+
77+
&:hover,
78+
&:focus {
79+
color: var(--link-hovered);
80+
}
81+
82+
&--active {
83+
color: var(--link-default);
84+
font-weight: 700;
85+
}
86+
}

‎assets/sass/footer.scss‎

Lines changed: 3 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
text-decoration: underline;
1818
color: var(--link-special);
1919
font-weight: 700;
20+
text-decoration: none;
2021

2122
&:hover,
2223
&:focus {
2324
color: var(--link-hovered);
25+
text-decoration: underline;
2426
}
2527

2628
@media (min-width: #{$breakpoint-lg}) {
@@ -37,70 +39,7 @@
3739
gap: 1rem;
3840
}
3941

40-
.o-language-switcher {
41-
position: relative;
42-
}
4342

44-
.o-language-switcher__button {
45-
border: 0;
46-
background-color: var(--bg-neutral);
47-
color: var(--color-body);
48-
display: flex;
49-
font-weight: 500;
50-
padding: 1rem 1rem 1rem 0;
51-
gap: 0.5rem;
52-
align-items: center;
53-
}
54-
55-
.o-language-switcher__icon {
56-
font-size: 0.7rem;
57-
transition: transform 0.2s;
58-
}
59-
60-
.o-language-switcher__button[aria-expanded="true"] .o-language-switcher__icon {
61-
transform: rotate(180deg);
62-
63-
@media (max-width: #{$breakpoint-lg}) {
64-
transform: rotate(0deg);
65-
}
66-
}
67-
68-
.o-language-switcher__dropdown {
69-
display: none;
70-
position: absolute;
71-
bottom: 100%;
72-
right: 0;
73-
background: var(--bg-neutral);
74-
border-top-left-radius: 4px;
75-
border-top-right-radius: 4px;
76-
list-style: none;
77-
width: min-content;
78-
margin-bottom: 0;
43+
#language-switcher-button {
7944
padding-left: 0;
80-
box-shadow: var(--box-shadow);
81-
z-index: 20;
82-
}
83-
84-
.o-language-switcher__button[aria-expanded="true"] + .o-language-switcher__dropdown {
85-
display: block;
86-
}
87-
88-
.o-language-switcher__item {
89-
margin: 1.6rem 3rem;
90-
}
91-
92-
.o-language-switcher__link {
93-
text-decoration: none;
94-
font-weight: 400;
95-
white-space: nowrap;
96-
97-
&:hover,
98-
&:focus {
99-
color: var(--link-hovered);
100-
}
101-
102-
&--active {
103-
color: var(--link-default);
104-
font-weight: 700;
105-
}
10645
}

‎assets/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@
1717
@import "button.scss";
1818
@import "startpage.scss";
1919
@import "interactiveMap.scss";
20+
@import "dropdown.scss";

0 commit comments

Comments
 (0)