+20 -1

src/components/navigation/Nav.astro

reviewed

··· 1 1 --- 2 2 import type { nav } from "@/content/config"; 3 3 import { getEntry } from "astro:content"; 4 4 + import Sidebar from "./Sidebar.astro"; 4 5 5 6 const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? []; 6 7 --- 7 8 8 9 <nav> 9 10 <h1>🪤 | vielle.dev</h1> 10 10 - <ul> 11 11 + <ul class="desktop"> 11 12 { 12 13 (() => { 13 14 const a = (name: string, href: string) => <a {href}>{name}</a>; ··· 51 52 })() 52 53 } 53 54 </ul> 55 55 + 56 56 + <button class="mobile" popovertarget="sidebar">pop</button> 57 57 + 58 58 + <Sidebar /> 54 59 </nav> 55 60 56 61 <style> ··· 147 152 margin-right: auto; 148 153 font-size: 1.5rem; 149 154 white-space: nowrap; 155 155 + } 156 156 + 157 157 + .mobile { 158 158 + display: none; 159 159 + } 160 160 + 161 161 + @media screen and (max-width: 650px) { 162 162 + .mobile { 163 163 + display: var(--display, block) !important; 164 164 + } 165 165 + 166 166 + .desktop { 167 167 + display: none !important; 168 168 + } 150 169 } 151 170 </style>

+26

src/components/navigation/Sidebar.astro

reviewed

··· 1 1 + --- 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 + <aside id="sidebar" popover> 9 9 + <nav> 10 10 + { 11 11 + (() => { 12 12 + const step = (entry: nav[]) => ( 13 13 + <ul> 14 14 + {entry.map((x) => ( 15 15 + <li> 16 16 + {x.url ? <a href={x.url}>{x.name}</a> : <span>{x.name}</span>} 17 17 + {x.children && step(x.children)} 18 18 + </li> 19 19 + ))} 20 20 + </ul> 21 21 + ); 22 22 + return step(data); 23 23 + })() 24 24 + } 25 25 + </nav> 26 26 + </aside>