wes/garden-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar nav: full garden tree on every page

Browse Source 
- buildNavTree: every non-draft page nested by vault folder; folders link
  to their (real or synthetic) index page and take its title when set
- NavTree component: recursive details/summary tree, no JS — folders on
  the current path render open, current page gets aria-current styling
- layout: sticky left sidebar >=72rem, flows after the footer as a site
  index on narrow screens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wes
2026-07-15 14:54:04 -04:00
co-authored by Claude Opus 4.8
parent 04c9aa2fb2
commit 13b23ace3d
3 changed files with 202 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+109 -16
View File
@@ -1,5 +1,8 @@
---
import 'katex/dist/katex.min.css';
import { getCollection } from 'astro:content';
import { buildNavTree } from '../lib/nav.mjs';
import NavTree from '../components/NavTree.astro';
interface Props {
title: string;
@@ -7,6 +10,7 @@ interface Props {
}
const { title, description } = Astro.props;
const isHome = Astro.url.pathname === '/';
const navTree = buildNavTree(await getCollection('garden'));
---
<!doctype html>
@@ -22,19 +26,27 @@ const isHome = Astro.url.pathname === '/';
src="https://plausible.io/js/script.js"></script>
</head>
<body>
<header>
{!isHome && <nav><a href="/">← home</a></nav>}
</header>
<main>
<slot />
</main>
<footer>
<p>
Wesley Ray · <a href="https://blog.c0smere.net">blog</a> ·
<a href="https://git.c0smere.net/wes">git</a> ·
<a href="https://resume.c0smere.net">resume</a>
</p>
</footer>
<div class="layout">
<div class="content-col">
<header>
{!isHome && <nav><a href="/">← home</a></nav>}
</header>
<main>
<slot />
</main>
<footer>
<p>
Wesley Ray · <a href="https://blog.c0smere.net">blog</a> ·
<a href="https://git.c0smere.net/wes">git</a> ·
<a href="https://resume.c0smere.net">resume</a>
</p>
</footer>
</div>
<aside class="sidebar">
<p class="sidebar-title"><a href="/">the garden</a></p>
<NavTree nodes={navTree} currentPath={Astro.url.pathname} />
</aside>
</div>
<script>
// mermaid: only load the (large) module on pages that need it
@@ -81,14 +93,95 @@ const isHome = Astro.url.pathname === '/';
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
max-width: 44rem;
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
line-height: 1.6;
}
.layout {
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
max-width: 44rem;
}
/* mobile: sidebar flows after the footer as a full site index */
.sidebar {
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--faint);
}
@media (min-width: 72rem) {
.layout {
display: grid;
grid-template-columns: 17rem minmax(0, 44rem);
gap: 3rem;
max-width: 66rem;
}
.sidebar {
order: -1;
margin-top: 0;
padding-top: 0;
border-top: none;
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
padding: 1.5rem 0.5rem 1.5rem 0;
}
}
.sidebar-title {
margin: 0 0 0.5rem;
font-weight: 600;
}
.sidebar-title a {
color: var(--fg);
text-decoration: none;
}
.sidebar ul {
list-style: none;
margin: 0;
padding-left: 0.85rem;
font-size: 0.85rem;
}
.sidebar > ul,
.sidebar-title + ul {
padding-left: 0;
}
.sidebar li {
margin: 0.15rem 0;
}
.sidebar a {
color: var(--muted);
text-decoration: none;
}
.sidebar a:hover {
color: var(--accent);
text-decoration: underline;
}
.sidebar a[aria-current='page'] {
color: var(--accent);
font-weight: 600;
}
.sidebar summary {
cursor: pointer;
list-style: none;
}
.sidebar summary::before {
content: '▸';
display: inline-block;
width: 0.9em;
color: var(--muted);
font-size: 0.8em;
transition: transform 0.15s;
}
.sidebar details[open] > summary::before {
transform: rotate(90deg);
}
.sidebar summary a {
font-weight: 550;
color: var(--fg);
}
a {
color: var(--accent);
}