Mirror of my GitHub Pages site
www.spenser.black/
Add interactive nav menu for mobile (#5)
authored by
Spenser Black
and committed by
GitHub
(Jul 15, 2026, 11:11 PM UTC)
e8e9cb90
b03cba35
+58
-9
+58
-9
src/components/Header.astro
+58
-9
src/components/Header.astro
···
7
7
---
8
8
9
9
<header>
10
-
<nav>
11
-
{
12
-
pages.map(([description, link]) => (
13
-
<a class="button primary" href={link}>
14
-
{description}
15
-
</a>
16
-
))
17
-
}
18
-
</nav>
10
+
<div class="dropdown-container">
11
+
<button
12
+
aria-expanded="false"
13
+
aria-controls="nav-menu"
14
+
id="nav-menu-button"
15
+
class="primary">Navigation</button
16
+
>
17
+
<nav id="nav-menu">
18
+
{
19
+
pages.map(([description, link]) => (
20
+
<a class="button primary" href={link}>
21
+
{description}
22
+
</a>
23
+
))
24
+
}
25
+
</nav>
26
+
</div>
19
27
<div class="controls">
20
28
<div id="theme-dropdown" class="dropdown">
21
29
<button
···
37
45
</header>
38
46
39
47
<script>
48
+
const button = document.getElementById(
49
+
"nav-menu-button",
50
+
) as HTMLButtonElement;
51
+
const menu = document.getElementById("nav-menu") as HTMLElement;
52
+
const cls = "expanded";
53
+
button.addEventListener("click", () => {
54
+
if (menu.classList.contains(cls)) {
55
+
menu.classList.remove(cls);
56
+
button.setAttribute("aria-expanded", "false");
57
+
} else {
58
+
menu.classList.add(cls);
59
+
button.setAttribute("aria-expanded", "true");
60
+
}
61
+
});
62
+
</script>
63
+
<script>
40
64
import "../scripts/theme-dropdown";
41
65
</script>
42
66
···
60
84
background-color: var(--contrast);
61
85
}
62
86
87
+
#nav-menu-button {
88
+
display: none;
89
+
}
63
90
nav a {
64
91
margin: 0 0.5rem;
92
+
}
93
+
@media screen and (max-width: 999px) {
94
+
#nav-menu-button {
95
+
display: unset;
96
+
}
97
+
nav.expanded {
98
+
display: flex;
99
+
flex-direction: column;
100
+
margin-top: 0.5rem;
101
+
}
102
+
103
+
nav a {
104
+
margin-bottom: 0.5rem;
105
+
}
106
+
}
107
+
nav {
108
+
display: none;
109
+
}
110
+
@media screen and (min-width: 1000px) {
111
+
nav {
112
+
display: unset;
113
+
}
65
114
}
66
115
</style>