vielle.dev
[Archived] Archived WIP of vielle.dev
1---
2import type { nav } from "@/content/config";
3import { getEntry } from "astro:content";
4
5const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
6---
7
8<aside id="sidebar" popover>
9 <h2>🪤 | vielle.dev</h2>
10
11 <nav>
12 {
13 (() => {
14 const step = (entry: nav[]) => (
15 <ul>
16 {entry.map((x) => (
17 <li>
18 {x.url ? <a href={x.url}>{x.name}</a> : <span>{x.name}</span>}
19 {x.children && step(x.children)}
20 </li>
21 ))}
22 </ul>
23 );
24 return step(data);
25 })()
26 }
27 </nav>
28</aside>
29
30<style>
31 aside {
32 inset: auto;
33 top: 0;
34 right: 0;
35 height: 100%;
36
37 background-color: white;
38 color: black;
39 border: 5px solid black;
40 border-radius: 20px 0 0 20px;
41 box-shadow: 0 10px;
42 padding: 10px 20px;
43
44 & ul {
45 padding-inline: 1em;
46 }
47
48 &::backdrop {
49 background-color: #00000080;
50 backdrop-filter: blur(15px);
51 }
52
53 /* animations */
54 --popover-animation-timing: 0.2s;
55 @media (prefers-reduced-motion: reduce) {
56 --popover-animation-timing: 0;
57 }
58 --popover-animation-easing: ease-in-out;
59
60 transition:
61 translate var(--popover-animation-timing, 0.2s)
62 var(--popover-animation-easing, linear) allow-discrete,
63 overlay var(--popover-animation-timing, 0.2s)
64 var(--popover-animation-easing, linear) allow-discrete,
65 display var(--popover-animation-timing, 0.2s)
66 var(--popover-animation-easing, linear) allow-discrete;
67
68 /* exit */
69 translate: 100% 0;
70 /* base */
71 &:popover-open {
72 translate: 0 0;
73 /* enter */
74 @starting-style {
75 translate: 100% 0;
76 }
77 }
78
79 &::backdrop {
80 transition:
81 display var(--popover-animation-timing)
82 var(--popover-animation-easing, linear) allow-discrete,
83 overlay var(--popover-animation-timing, 0.2s)
84 var(--popover-animation-easing, linear) allow-discrete,
85 opacity var(--popover-animation-timing)
86 var(--popover-animation-easing, linear) allow-discrete;
87
88 /* exit */
89 opacity: 0;
90 }
91 /* base */
92 &:popover-open::backdrop {
93 opacity: 1;
94 /* enter */
95 @starting-style {
96 opacity: 0;
97 }
98 }
99 }
100</style>