+14 -18

src/components/generic/Nav.astro

reviewed

··· 1 1 --- 2 2 - import type { nav } from "@/content/config"; 3 2 import NavEntry from "./NavEntry.astro"; 4 3 import Hamburger from "@/assets/hamburger.svg"; 5 4 import X from "@/assets/x.svg"; 5 5 + import { getCollection } from "astro:content"; 6 6 7 7 interface Props { 8 8 - startOpen?: boolean; 9 8 current: string; 10 10 - data: nav[]; 11 9 } 12 10 13 13 - const { data, startOpen = false, current } = Astro.props; 11 11 + const { current } = Astro.props; 12 12 + 13 13 + const data = await getCollection("nav").then((x) => x.map((x) => x.data)); 14 14 --- 15 15 16 16 <button ··· 21 21 > 22 22 <Hamburger /> 23 23 </button> 24 24 - <dialog closedby="any" open={startOpen} id="nav" popover> 25 25 - <div class="top"> 26 26 - <h1>{current}</h1> 27 27 - <button popovertarget="nav" popovertargetaction="hide" aria-label="close"> 28 28 - <X width={32} height={32} /> 29 29 - </button> 30 30 - </div> 24 24 + <dialog closedby="any" id="nav" popover> 25 25 + <button popovertarget="nav" popovertargetaction="hide" aria-label="close"> 26 26 + <X width={32} height={32} /> 27 27 + </button> 28 28 + <h1>{current}</h1> 31 29 <NavEntry {data} /> 32 30 </dialog> 33 31 34 32 <style> 35 33 button { 34 34 + float: right; 35 35 + height: 3em; 36 36 background-color: transparent; 37 37 border: none; 38 38 & svg { ··· 46 46 border-radius: 0 0 50% 0; 47 47 } 48 48 49 49 - .top { 50 50 - display: flex; 51 51 - flex-direction: row; 52 52 - justify-content: space-between; 53 53 - } 54 54 - 55 49 dialog { 56 50 color: white; 57 51 58 58 - width: min(50vw, 20rem); 52 52 + min-width: 20rem; 53 53 + width: fit-content; 54 54 + max-width: 40rem; 59 55 height: 100vh; 60 56 padding: 1rem; 61 57

+1 -2

src/pages/blog/index.astro

reviewed

··· 12 12 const posts = await getCollection("blog").then((x) => 13 13 x.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()) 14 14 ); 15 15 - const nav = await getCollection("nav").then((x) => x.map((x) => x.data)); 16 15 --- 17 16 18 17 <style> ··· 57 56 <Background /> 58 57 <main> 59 58 <heading style={`--y-gap: ${blog.post.yGap}rem`}> 60 60 - <Nav data={nav} current="Blog" /> 59 59 + <Nav current="Blog" /> 61 60 62 61 <a href="/rss.xml" aria-label="Rss Feed"> 63 62 <Rss width="1.6em" height="1.6em" />