tangled
alpha
login
or
join now
vielle.dev
/
site-archive
0
fork
atom
[Archived] Archived WIP of vielle.dev
0
fork
atom
overview
issues
pulls
pipelines
Add basis for mobile sidebar layout
vielle.dev
7 months ago
aa0d35f6
588f6fc7
verified
This commit was signed with the committer's
known signature
.
vielle.dev
SSH Key Fingerprint:
SHA256:/4bvxqoEh9iMdjAPgcgAgXKZZQTROL3ULiPt6nH9RSs=
+46
-1
2 changed files
expand all
collapse all
unified
split
src
components
navigation
Nav.astro
Sidebar.astro
+20
-1
src/components/navigation/Nav.astro
···
1
---
2
import type { nav } from "@/content/config";
3
import { getEntry } from "astro:content";
0
4
5
const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
6
---
7
8
<nav>
9
<h1>🪤 | vielle.dev</h1>
10
-
<ul>
11
{
12
(() => {
13
const a = (name: string, href: string) => <a {href}>{name}</a>;
···
51
})()
52
}
53
</ul>
0
0
0
0
54
</nav>
55
56
<style>
···
147
margin-right: auto;
148
font-size: 1.5rem;
149
white-space: nowrap;
0
0
0
0
0
0
0
0
0
0
0
0
0
0
150
}
151
</style>
···
1
---
2
import type { nav } from "@/content/config";
3
import { getEntry } from "astro:content";
4
+
import Sidebar from "./Sidebar.astro";
5
6
const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
7
---
8
9
<nav>
10
<h1>🪤 | vielle.dev</h1>
11
+
<ul class="desktop">
12
{
13
(() => {
14
const a = (name: string, href: string) => <a {href}>{name}</a>;
···
52
})()
53
}
54
</ul>
55
+
56
+
<button class="mobile" popovertarget="sidebar">pop</button>
57
+
58
+
<Sidebar />
59
</nav>
60
61
<style>
···
152
margin-right: auto;
153
font-size: 1.5rem;
154
white-space: nowrap;
155
+
}
156
+
157
+
.mobile {
158
+
display: none;
159
+
}
160
+
161
+
@media screen and (max-width: 650px) {
162
+
.mobile {
163
+
display: var(--display, block) !important;
164
+
}
165
+
166
+
.desktop {
167
+
display: none !important;
168
+
}
169
}
170
</style>
+26
src/components/navigation/Sidebar.astro
···
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
···
1
+
---
2
+
import type { nav } from "@/content/config";
3
+
import { getEntry } from "astro:content";
4
+
5
+
const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
6
+
---
7
+
8
+
<aside id="sidebar" popover>
9
+
<nav>
10
+
{
11
+
(() => {
12
+
const step = (entry: nav[]) => (
13
+
<ul>
14
+
{entry.map((x) => (
15
+
<li>
16
+
{x.url ? <a href={x.url}>{x.name}</a> : <span>{x.name}</span>}
17
+
{x.children && step(x.children)}
18
+
</li>
19
+
))}
20
+
</ul>
21
+
);
22
+
return step(data);
23
+
})()
24
+
}
25
+
</nav>
26
+
</aside>
vielle.dev