vielle.dev
Personal Site
Use proper semantic HTML in header
+27
-25
src/components/Header.astro
+27
-25
src/components/Header.astro
···
5
5
<header>
6
6
<h1>vielle.dev</h1>
7
7
8
-
<ul>
9
-
{
10
-
(() => {
11
-
const name = (url: nav) =>
12
-
url.slug ? <a href={url.slug}>{url.name}</a> : url.name;
13
-
const flatten = (urls: nav[]) =>
14
-
urls.map((url) => (
8
+
<nav>
9
+
<ul>
10
+
{
11
+
(() => {
12
+
const name = (url: nav) =>
13
+
url.slug ? <a href={url.slug}>{url.name}</a> : url.name;
14
+
const flatten = (urls: nav[]) =>
15
+
urls.map((url) => (
16
+
<li>
17
+
{name(url)}
18
+
{url.children && <ul>{flatten(url.children)}</ul>}
19
+
</li>
20
+
));
21
+
return urls.map((url) => (
15
22
<li>
16
-
{name(url)}
17
-
{url.children && <ul>{flatten(url.children)}</ul>}
23
+
{url.children ? (
24
+
<details name="nav">
25
+
<summary>{name(url)}</summary>
26
+
<ul>{flatten(url.children)}</ul>
27
+
</details>
28
+
) : (
29
+
name(url)
30
+
)}
18
31
</li>
19
32
));
20
-
return urls.map((url) => (
21
-
<li>
22
-
{url.children ? (
23
-
<details name="nav">
24
-
<summary>{name(url)}</summary>
25
-
<ul>{flatten(url.children)}</ul>
26
-
</details>
27
-
) : (
28
-
name(url)
29
-
)}
30
-
</li>
31
-
));
32
-
})()
33
-
}
34
-
</ul>
33
+
})()
34
+
}
35
+
</ul>
36
+
</nav>
35
37
</header>
36
38
37
39
<style>
···
51
53
flex-direction: column;
52
54
}
53
55
54
-
& > ul {
56
+
& > nav > ul {
55
57
display: flex;
56
58
flex-direction: row;
57
59
align-items: center;