vielle.dev
[Archived] Archived WIP of vielle.dev
1.6 kB
90 lines
1---
2import NavEntry from "./NavEntry.astro";
3import Hamburger from "@/assets/hamburger.svg";
4import X from "@/assets/x.svg";
5import { getEntry } from "astro:content";
6
7interface Props {
8 current: string;
9}
10
11const { current } = Astro.props;
12
13const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
14---
15
16<button
17 popovertarget="nav"
18 popovertargetaction="show"
19 aria-label="Nav Menu"
20 id="nav-menu"
21>
22 <Hamburger />
23</button>
24<dialog closedby="any" id="nav" popover>
25 <button
26 popovertarget="nav"
27 popovertargetaction="hide"
28 aria-label="close"
29 id="nav-menu-close"
30 >
31 <X width={32} height={32} />
32 </button>
33 <h1>{current}</h1>
34 <NavEntry {data} />
35</dialog>
36
37<style>
38 button {
39 background-color: transparent;
40 border: none;
41 & svg {
42 stroke: white;
43 }
44 }
45
46 #nav-menu-close {
47 float: right;
48 height: 3em;
49 }
50
51 dialog {
52 color: white;
53
54 min-width: 200px;
55 width: fit-content;
56 max-width: 400px;
57 height: 100vh;
58 padding: 10px;
59
60 background: black;
61 border: none;
62
63 position: fixed;
64 top: 0;
65 transition:
66 left 0.2s,
67 display 0.2s allow-discrete;
68
69 &:popover-open {
70 /* Post-Entry (Normal) State */
71 left: 0;
72
73 /* Pre-Entry State */
74 @starting-style {
75 left: -100%;
76 }
77 }
78
79 /* Exiting State */
80 &:not(:popover-open) {
81 left: -100%;
82 }
83 }
84
85 /* STUPID ISSUE (astro tries to add a tag to the backdrop) */
86 :global(::backdrop) {
87 background: #00000080;
88 backdrop-filter: blur(5px);
89 }
90</style>