From e5e79d75aa8ee920ceef13f703b5d171e78391c6 Mon Sep 17 00:00:00 2001 From: artheru Date: Wed, 10 Jun 2026 13:35:07 +0800 Subject: [PATCH] docs: collapsible doc nav on mobile (0.91.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit a mobile audit (no overflow anywhere; agent modal + on-this-page TOC both fine) turned up one weak spot: on phones the doc tree was a cramped 210px scroll area pinned above every page, and it never scrolled the active doc into view — so you couldn't tell which doc you were reading or reach half of them easily. - the sidebar now collapses to a compact bar showing the CURRENT doc + a chevron; tap to reveal the full tree (active doc highlighted), tap a doc to navigate and auto-collapse - desktop is byte-for-byte unchanged: the collapsible wrapper is display:contents off-mobile, so the tree stays a normal flex child (sidebar still 280px) - verified live: mobile collapsed shows 'API reference', expands to 8 docs, selecting Quickstart navigates + collapses + relabels; desktop toggle hidden, tree intact --- index.html | 2 +- package.json | 2 +- src/DocsApp.jsx | 36 ++++++++++++++++++++++-------------- src/Scene2D.jsx | 2 +- src/styles.css | 12 +++++++++++- 5 files changed, 36 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index f207281..2839dc0 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ @media (prefers-reduced-motion: reduce) { .app-loading-gem { animation: none; transform: rotate(45deg); } } - + diff --git a/package.json b/package.json index 9f0a157..689fcc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "amerc-site", - "version": "0.90.0-agenturls", + "version": "0.91.0-docsnav", "private": true, "type": "module", "scripts": { diff --git a/src/DocsApp.jsx b/src/DocsApp.jsx index af30626..62d3796 100644 --- a/src/DocsApp.jsx +++ b/src/DocsApp.jsx @@ -33,6 +33,7 @@ function DocsWorkspace({ canEdit }) { const [draft, setDraft] = useState({ title: '', folder: '', body: '' }); const [err, setErr] = useState(''); const [q, setQ] = useState(''); + const [navOpen, setNavOpen] = useState(false); const renderRef = useRef(null); const pendingSection = useRef(null); @@ -52,6 +53,7 @@ function DocsWorkspace({ canEdit }) { // shareable doc + section URLs: #/ or #// const openDoc = useCallback((d) => { setSel(d.id); + setNavOpen(false); pendingSection.current = null; const slug = slugify(d.title); if (window.location.hash !== `#/${slug}`) window.history.pushState(null, '', `${window.location.pathname}${window.location.search}#/${slug}`); @@ -134,20 +136,26 @@ function DocsWorkspace({ canEdit }) { return (
diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx index 09a326d..15bc5a8 100644 --- a/src/Scene2D.jsx +++ b/src/Scene2D.jsx @@ -10,7 +10,7 @@ import { api } from './api.js'; const Menu = ({ size = 20 }) => (); const X = ({ size = 20 }) => (); -const RELEASE = '0.90.0-agenturls'; +const RELEASE = '0.91.0-docsnav'; const NAV = [ { id: 'home', label: 'Tavern' }, diff --git a/src/styles.css b/src/styles.css index 14c0318..61a84d6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -837,6 +837,12 @@ button { .docs-side-top { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid #1b2536; } .docs-side-top input { flex: 1; padding: 8px; border-radius: 7px; background: #0a0f1a; border: 1px solid #233044; color: #eaf2ff; } .docs-tree { overflow: auto; padding: 8px; } +/* docs nav: collapsible on mobile, transparent (display:contents) on desktop (0.91) */ +.docs-nav-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #0c111c; border: none; border-bottom: 1px solid #1b2536; color: #eaf2ff; font-family: inherit; font-size: 14px; cursor: pointer; text-align: left; } +.docs-nav-cur { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.docs-nav-chev { color: #8a78b4; flex: 0 0 auto; font-size: 12px; transition: transform 0.18s; } +.docs-nav-toggle[aria-expanded="true"] .docs-nav-chev { transform: rotate(180deg); } +.docs-side-body { display: contents; } .docs-folder-name { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #5f6e88; margin: 10px 6px 4px; } .docs-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px; color: #c3d0e6; cursor: pointer; font-size: 13px; } .docs-item:hover { background: #141d2e; } @@ -1484,7 +1490,11 @@ button { /* docs responsive — stack on mobile so the prose gets full width (0.77) */ @media (max-width: 760px) { .docs { flex-direction: column; } - .docs-side { width: 100%; max-height: 210px; overflow-y: auto; border-right: none; border-bottom: 2px solid #1b2536; } + .docs-side { width: 100%; overflow: visible; border-right: none; border-bottom: 2px solid #1b2536; } + .docs-nav-toggle { display: flex; } + .docs-side-body { display: none; } + .docs-side-body.open { display: block; border-bottom: 1px solid #1b2536; } + .docs-side-body.open .docs-tree { max-height: 58vh; overflow-y: auto; } .docs-main { padding: 20px 16px; } }