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