diff --git a/src/components/NavTree.astro b/src/components/NavTree.astro
new file mode 100644
index 0000000..4ed7145
--- /dev/null
+++ b/src/components/NavTree.astro
@@ -0,0 +1,38 @@
+---
+interface Props {
+  nodes: any[];
+  currentPath: string;
+}
+const { nodes, currentPath } = Astro.props;
+// build-time pathnames may carry .html / index.html suffixes — normalize
+const norm = decodeURIComponent(currentPath)
+  .replace(/index\.html$/, '')
+  .replace(/\.html$/, '');
+const here = (u: string) => norm === u || norm === u.replace(/\/$/, '');
+const under = (u: string) => norm.startsWith(u);
+---
+
+<ul class="nav-tree">
+  {
+    nodes.map((n) =>
+      n.children ? (
+        <li>
+          <details open={under(n.url)}>
+            <summary>
+              <a href={n.url} aria-current={here(n.url) ? 'page' : undefined}>
+                {n.name}
+              </a>
+            </summary>
+            <Astro.self nodes={n.children} currentPath={currentPath} />
+          </details>
+        </li>
+      ) : (
+        <li>
+          <a href={n.url} aria-current={here(n.url) ? 'page' : undefined}>
+            {n.name}
+          </a>
+        </li>
+      ),
+    )
+  }
+</ul>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 96c00a4..b5f6dbc 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -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);
       }
diff --git a/src/lib/nav.mjs b/src/lib/nav.mjs
new file mode 100644
index 0000000..74848ae
--- /dev/null
+++ b/src/lib/nav.mjs
@@ -0,0 +1,55 @@
+// Sidebar navigation tree: every non-draft page in the garden, nested by
+// vault folder. Folders link to their index page (real or synthetic).
+import { urlForId, slugForId } from './quartz-compat.mjs';
+
+export function buildNavTree(entries) {
+  const root = { children: new Map() };
+
+  const dirNode = (parts) => {
+    let node = root;
+    let acc = '';
+    for (const seg of parts) {
+      acc = acc ? `${acc}/${seg}` : seg;
+      if (!node.children.has(seg)) {
+        node.children.set(seg, {
+          name: seg,
+          url: '/' + slugForId(acc) + '/',
+          children: new Map(),
+        });
+      }
+      node = node.children.get(seg);
+    }
+    return node;
+  };
+
+  for (const e of entries) {
+    if (e.data.draft || e.id === 'index') continue;
+    const parts = e.id.split('/');
+    const base = parts.pop();
+    const folder = dirNode(parts);
+    if (base === 'index') {
+      // folder's own page: use its title for the folder label if set
+      if (e.data.title) folder.name = e.data.title;
+      continue;
+    }
+    folder.children.set(base, {
+      name: e.data.title ?? base,
+      url: urlForId(e.id),
+      children: null,
+    });
+  }
+
+  const finalize = (node) => {
+    const kids = [...node.children.values()].map((k) =>
+      k.children ? finalize(k) : k,
+    );
+    kids.sort((a, b) => {
+      const af = a.children ? 0 : 1;
+      const bf = b.children ? 0 : 1;
+      return af - bf || a.name.localeCompare(b.name, 'en', { sensitivity: 'base' });
+    });
+    return { ...node, children: kids };
+  };
+
+  return finalize(root).children;
+}
