Skip to content

Commit 979e6c3

Browse files
Anca2022Anca2022
authored
Fix navigation issues on dev portal (#168)
1 parent d2cdeda commit 979e6c3

File tree

1 file changed

+55
-52
lines changed

1 file changed

+55
-52
lines changed

‎src/components/pages/FoundationHeader.astro‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,8 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
2828
>
2929
<ul class="site-nav__links menu--level-1" id="siteNavMenu">
3030
<li class="menu-item has-submenu menu-item--level-1">
31-
<a
32-
href="/about-us"
33-
aria-expanded="false"
34-
data-umami-event="Site Nav - Foundation">Foundation</a
31+
<button aria-expanded="false" data-umami-event="Site Nav - Foundation"
32+
>Foundation</button
3533
>
3634
<ul class="menu--level-2">
3735
<li class="menu-item menu-item--level-2">
@@ -55,10 +53,8 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
5553
</ul>
5654
</li>
5755
<li class="menu-item has-submenu menu-item--level-1">
58-
<a
59-
href="/developers"
60-
aria-expanded="false"
61-
data-umami-event="Site Nav - Technology">Technology</a
56+
<button aria-expanded="false" data-umami-event="Site Nav - Technology"
57+
>Technology</button
6258
>
6359
<ul class="menu--level-2">
6460
<li class="menu-item menu-item--level-2">
@@ -100,10 +96,8 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
10096
</ul>
10197
</li>
10298
<li class="menu-item has-submenu menu-item--level-1">
103-
<a
104-
href="/financial-services"
105-
aria-expanded="false"
106-
data-umami-event="Site Nav - Grants">Grants</a
99+
<button aria-expanded="false" data-umami-event="Site Nav - Grants"
100+
>Grants</button
107101
>
108102
<ul class="menu--level-2">
109103
<li class="menu-item menu-item--level-2">
@@ -126,10 +120,9 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
126120
</ul>
127121
</li>
128122
<li class="menu-item has-submenu menu-item--level-1">
129-
<a
130-
href="/blog"
123+
<button
131124
aria-expanded="false"
132-
data-umami-event="Site Nav - Content hub">Content hub</a
125+
data-umami-event="Site Nav - Content hub">Content hub</button
133126
>
134127
<ul class="menu--level-2">
135128
<li class="menu-item menu-item--level-2">
@@ -161,10 +154,9 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
161154
</ul>
162155
</li>
163156
<li class="menu-item has-submenu menu-item--level-1">
164-
<a
165-
href="/get-involved"
157+
<button
166158
aria-expanded="false"
167-
data-umami-event="Site Nav - Participate">Participate</a
159+
data-umami-event="Site Nav - Participate">Participate</button
168160
>
169161
<ul class="menu--level-2">
170162
<li class="menu-item menu-item--level-2">
@@ -231,19 +223,26 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
231223
justify-content: center;
232224
}
233225

234-
.site-nav a {
226+
.site-nav a,
227+
.site-nav__links button {
235228
display: block;
236229
color: currentColor;
237230
transition: text-decoration 200ms ease-in-out;
238231
white-space: nowrap;
239232
}
240233

234+
.site-nav__links button {
235+
padding: var(--space-s) var(--space-2xs);
236+
border: none;
237+
background-color: transparent;
238+
}
239+
241240
.site-logo {
242241
width: 11em;
243242
flex: none;
244243
}
245244

246-
.site-nav__links .has-submenu > a::after {
245+
.site-nav__links .has-submenu > button::after {
247246
content: url(/public/img/arrow-menu.svg);
248247
display: inline-block;
249248
width: 9px;
@@ -254,9 +253,9 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
254253
}
255254
}
256255

257-
.site-nav__links .has-submenu > a[aria-expanded="true"]::after,
258-
.site-nav__links .has-submenu > a:hover::after,
259-
.site-nav__links .has-submenu:has(a:hover) > a::after {
256+
.site-nav__links .has-submenu > button[aria-expanded="true"]::after,
257+
.site-nav__links .has-submenu > button:hover::after,
258+
.site-nav__links .has-submenu:has(a:hover) > button::after {
260259
transform: translateY(30%) rotate(180deg);
261260
}
262261

@@ -266,7 +265,8 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
266265
color: var(--color-black);
267266
}
268267

269-
.site-nav__links a:hover {
268+
.site-nav__links a:hover,
269+
.site-nav__links button:hover {
270270
background-color: var(--color-header-accent);
271271
color: currentColor;
272272
}
@@ -329,15 +329,16 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
329329
transform: translateX(100%);
330330
}
331331

332-
.site-links-wrapper a {
332+
.site-links-wrapper a,
333+
.site-nav__links button {
333334
padding-inline: var(--space-s);
334335
}
335336

336-
a[aria-expanded="false"] + .menu--level-2 {
337+
button[aria-expanded="false"] + .menu--level-2 {
337338
display: none;
338339
}
339340

340-
a[aria-expanded="true"] + .menu--level-2 {
341+
button[aria-expanded="true"] + .menu--level-2 {
341342
display: block;
342343
}
343344

@@ -448,12 +449,12 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
448449
padding: var(--space-2xs);
449450
}
450451

451-
.has-submenu > a[aria-expanded="false"] + ul {
452+
.has-submenu > button[aria-expanded="false"] + ul {
452453
visibility: hidden;
453454
opacity: 0;
454455
}
455456

456-
.has-submenu > a[aria-expanded="true"] + ul,
457+
.has-submenu > button[aria-expanded="true"] + ul,
457458
.menu-item--level-1:hover > .menu--level-2,
458459
.menu--level-2:hover {
459460
visibility: visible;
@@ -518,27 +519,29 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
518519
) as HTMLInputElement;
519520

520521
if (document.contains(siteNav)) {
521-
const subLinks = document.querySelectorAll(".has-submenu > a");
522-
523-
subLinks.forEach((subLink) => {
524-
subLink.setAttribute("aria-expanded", "false");
525-
526-
subLink.addEventListener("click", function (event) {
527-
const clickedSubLink = event.target as Element;
528-
const allSubLinks = Array.from(subLinks);
529-
const notClickedLinks = allSubLinks.filter(function (otherLink) {
530-
return otherLink !== clickedSubLink;
531-
});
532-
notClickedLinks.forEach((link) => {
533-
link.setAttribute("aria-expanded", "false");
522+
const submenuButtons = document.querySelectorAll(".has-submenu > button");
523+
524+
submenuButtons.forEach((submenuButton) => {
525+
submenuButton.setAttribute("aria-expanded", "false");
526+
527+
submenuButton.addEventListener("click", function (event) {
528+
const clickedSubmenuButton = event.target;
529+
const allSubmenuButtons = Array.from(submenuButtons);
530+
const notClickedSubmenuButtons = allSubmenuButtons.filter(
531+
function (otherSubmenuButton) {
532+
return otherSubmenuButton !== clickedSubmenuButton;
533+
}
534+
);
535+
notClickedSubmenuButtons.forEach((button) => {
536+
button.setAttribute("aria-expanded", "false");
534537
});
535-
if (clickedSubLink?.getAttribute("aria-expanded") === "true") {
536-
clickedSubLink?.setAttribute("aria-expanded", "false");
537-
} else {
538-
clickedSubLink?.setAttribute("aria-expanded", "true");
538+
if (clickedSubmenuButton instanceof HTMLElement) {
539+
if (clickedSubmenuButton?.getAttribute("aria-expanded") === "true") {
540+
clickedSubmenuButton?.setAttribute("aria-expanded", "false");
541+
} else {
542+
clickedSubmenuButton?.setAttribute("aria-expanded", "true");
543+
}
539544
}
540-
event.preventDefault();
541-
return false;
542545
});
543546
});
544547

@@ -549,14 +552,14 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
549552
});
550553

551554
document.addEventListener("click", function (event) {
552-
if (isClickOutside(event, subLinks)) {
555+
if (isClickOutside(event, submenuButtons)) {
553556
resetSubMenus();
554557
}
555558
});
556559

557560
function resetSubMenus() {
558-
subLinks.forEach((subLink) => {
559-
subLink.setAttribute("aria-expanded", "false");
561+
submenuButtons.forEach((submenuButton) => {
562+
submenuButton.setAttribute("aria-expanded", "false");
560563
});
561564
}
562565
}
@@ -595,7 +598,7 @@ import ExternalIcon from "../../../public/img/icon-external.svg";
595598

596599
if (isExactMatch || isSectionMatch) {
597600
const parentMenu = devLink.closest(".menu-item--level-1");
598-
const parentMenuLink = parentMenu?.querySelector("a");
601+
const parentMenuLink = parentMenu?.querySelector("button");
599602

600603
devLink.classList.add("is-active");
601604
parentMenuLink?.classList.add("is-active");

0 commit comments

Comments
 (0)