+27 -2

src/components/generic/Nav.astro

reviewed

··· 1 1 --- 2 2 - import NavEntry from "./NavEntry.astro"; 2 2 + import type { nav } from "@/content/config"; 3 3 import { getEntry } from "astro:content"; 4 4 5 5 const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? []; 6 6 --- 7 7 8 8 <header> 9 9 - <NavEntry {data} /> 9 9 + { 10 10 + (() => { 11 11 + const a = (name: string, href: string) => <a {href}>{name}</a>; 12 12 + const render = (name: string, children: nav[]) => ( 13 13 + <details> 14 14 + <summary>{name}</summary> 15 15 + <ul> 16 16 + {children.map((x) => ( 17 17 + <li> 18 18 + {x.children 19 19 + ? render(x.name, x.children) 20 20 + : a(x.name, x.url || "")} 21 21 + </li> 22 22 + ))} 23 23 + </ul> 24 24 + </details> 25 25 + ); 26 26 + return data.map((entry) => ( 27 27 + <li> 28 28 + {entry.children 29 29 + ? render(entry.name, entry.children) 30 30 + : a(entry.name, entry.url || "")} 31 31 + </li> 32 32 + )); 33 33 + })() 34 34 + } 10 35 </header> 11 36 12 37 <style>

-67

src/components/generic/NavEntry.astro

reviewed

··· 1 1 - --- 2 2 - import type { nav } from "@/content/config"; 3 3 - 4 4 - interface Props { 5 5 - data: nav[]; 6 6 - root?: string; 7 7 - } 8 8 - 9 9 - const { data, root = "" } = Astro.props; 10 10 - --- 11 11 - 12 12 - <ul> 13 13 - { 14 14 - data.map((x) => ( 15 15 - <li> 16 16 - {x.url ? ( 17 17 - <a href={`${root}${x.url}`}>{x.name}</a> 18 18 - ) : ( 19 19 - <span>{x.name}</span> 20 20 - )} 21 21 - {x.children ? ( 22 22 - <Astro.self root={`${root}${x.url ? x.url : ""}`} data={x.children} /> 23 23 - ) : null} 24 24 - </li> 25 25 - )) 26 26 - } 27 27 - </ul> 28 28 - 29 29 - <style> 30 30 - li { 31 31 - list-style-type: "╺ "; 32 32 - margin-inline-start: 20px; 33 33 - } 34 34 - 35 35 - a:link { 36 36 - color: #62a0ea; 37 37 - } 38 38 - 39 39 - a:visited { 40 40 - color: #dc8add; 41 41 - } 42 42 - 43 43 - a:focus, 44 44 - a:hover { 45 45 - text-decoration: none; 46 46 - color: #4040ff 47 47 - 48 48 - &:visited { 49 49 - color: #ff40ff; 50 50 - } 51 51 - } 52 52 - 53 53 - a:focus { 54 54 - outline: 2px solid #62a0ea; 55 55 - outline-offset: 0; 56 56 - border-radius: 4px; 57 57 - 58 58 - &:visited { 59 59 - outline-color: #dc8add; 60 60 - } 61 61 - } 62 62 - 63 63 - a:active { 64 64 - text-decoration: none; 65 65 - scale: 1.05; 66 66 - } 67 67 - </style>