+1

src/assets/hamburger.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>

+1

src/assets/x.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

+24 -2

src/components/generic/Nav.astro

··· 1 1 --- 2 2 import type { nav } from "@/content.config"; 3 3 import NavEntry from "./NavEntry.astro"; 4 4 + import Hamburger from "@/assets/hamburger.svg"; 5 5 + import X from "@/assets/x.svg"; 4 6 5 7 interface Props { 6 8 startOpen?: boolean; ··· 11 13 const { data, startOpen = false, current } = Astro.props; 12 14 --- 13 15 14 14 - <button popovertarget="nav">Open</button> 16 16 + <button popovertarget="nav" popovertargetaction="show"><Hamburger /></button> 15 17 <dialog closedby="any" open={startOpen} id="nav" popover> 16 16 - <h1>{current}</h1> 18 18 + <div class="top"> 19 19 + <h1>{current}</h1> 20 20 + <button popovertarget="nav" popovertargetaction="hide" 21 21 + ><X width={32} height={32} /></button 22 22 + > 23 23 + </div> 17 24 {(<NavEntry {data} />)} 18 25 </dialog> 19 26 20 27 <style> 28 28 + button { 29 29 + background-color: transparent; 30 30 + border: none; 31 31 + & svg { 32 32 + stroke: white; 33 33 + } 34 34 + } 35 35 + 36 36 + .top { 37 37 + display: flex; 38 38 + flex-direction: row; 39 39 + justify-content: space-between; 40 40 + } 41 41 + 21 42 dialog { 22 43 color: white; 23 44 24 45 width: min(50vw, 20rem); 25 46 height: 100vh; 47 47 + padding: 1rem; 26 48 27 49 background: black; 28 50 border: none;

+32 -20

src/components/generic/NavEntry.astro

··· 3 3 4 4 interface Props { 5 5 data: nav[]; 6 6 + root?: string; 6 7 } 7 8 8 8 - const { data } = Astro.props; 9 9 + const { data, root = "" } = Astro.props; 9 10 --- 10 11 11 11 - <ul class="nav-ul"> 12 12 + <ul> 12 13 { 13 13 - data.map((x) => 14 14 - x.children && x.children.length > 0 ? ( 15 15 - <li> 16 16 - <details> 17 17 - <summary> 18 18 - <a href={x.slug}>{x.name}</a> 19 19 - </summary> 20 20 - {x.children && x.children.length > 0 ? ( 21 21 - <Astro.self data={x.children} /> 22 22 - ) : null} 23 23 - </details> 24 24 - </li> 25 25 - ) : ( 26 26 - <li> 27 27 - <a href={x.slug}>{x.name}</a> 28 28 - </li> 29 29 - ) 30 30 - ) 14 14 + data.map((x) => ( 15 15 + <li> 16 16 + <a href={`${root}${x.slug}`}>{x.name}</a> 17 17 + {x.children && x.children.length > 0 ? ( 18 18 + <Astro.self root={`${root}${x.slug}`} data={x.children} /> 19 19 + ) : null} 20 20 + </li> 21 21 + )) 31 22 } 32 23 </ul> 24 24 + 25 25 + <style> 26 26 + li { 27 27 + list-style-type: "╺ "; 28 28 + margin-inline-start: 4rem; 29 29 + 30 30 + &:has(details) { 31 31 + list-style-type: "🞂 "; 32 32 + background-color: transparent; 33 33 + 34 34 + & summary { 35 35 + display: block; 36 36 + background-color: var(--bg); 37 37 + } 38 38 + } 39 39 + 40 40 + &:has(details:open) { 41 41 + list-style-type: "🞃 "; 42 42 + } 43 43 + } 44 44 + </style>