vielle.dev / site-archive
[Archived] Archived WIP of vielle.dev
fork atom

Add basis for mobile sidebar layout

vielle.dev aa0d35f6 588f6fc7

verified
+46 -1
unified split
+20 -1
src/components/navigation/Nav.astro
··· 1 1 --- 2 2 import type { nav } from "@/content/config"; 3 3 import { getEntry } from "astro:content"; 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 - <ul> 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 + 56 + <button class="mobile" popovertarget="sidebar">pop</button> 57 + 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 + } 156 + 157 + .mobile { 158 + display: none; 159 + } 160 + 161 + @media screen and (max-width: 650px) { 162 + .mobile { 163 + display: var(--display, block) !important; 164 + } 165 + 166 + .desktop { 167 + display: none !important; 168 + } 150 169 } 151 170 </style>
+26
src/components/navigation/Sidebar.astro
··· 1 + --- 2 + import type { nav } from "@/content/config"; 3 + import { getEntry } from "astro:content"; 4 + 5 + const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? []; 6 + --- 7 + 8 + <aside id="sidebar" popover> 9 + <nav> 10 + { 11 + (() => { 12 + const step = (entry: nav[]) => ( 13 + <ul> 14 + {entry.map((x) => ( 15 + <li> 16 + {x.url ? <a href={x.url}>{x.name}</a> : <span>{x.name}</span>} 17 + {x.children && step(x.children)} 18 + </li> 19 + ))} 20 + </ul> 21 + ); 22 + return step(data); 23 + })() 24 + } 25 + </nav> 26 + </aside>