Add adaptive left-hand TOC for GitHub Pages docs#2
Conversation
Apply the Folio light/dark palette to docs/index.html and tighten the table of contents visual design. Replace per-item bars with a compact sections chip, add desktop pin/unpin behavior on the § control, and stabilize hover/mobile open-close behavior to remove jitter. Also add install commands to the Quick start block.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d51969f6ca
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| tocToggle.hidden = true; | ||
| tocPin.hidden = prefersTouch; | ||
| tocToggle.setAttribute('aria-expanded', 'false'); | ||
| toc.classList.toggle('is-expanded', prefersTouch || toc.classList.contains('is-pinned')); |
There was a problem hiding this comment.
On non-mobile touch devices (e.g. tablet widths above 520px), this branch hides both TOC controls and forces the sidebar open via is-expanded, so users cannot collapse it. Because the layout only reserves the collapsed gutter (.layout keeps padding-left: 3.75rem), the permanently expanded TOC can overlap the main content area on common tablet viewports, which is a navigation and readability regression specific to coarse-pointer desktop layouts.
Useful? React with 👍 / 👎.
jclem
deleted the
codex/add-collapsible-table-of-contents-to-documentation
branch
1 participant
Motivation
Description
☰ Sectionstoggle todocs/index.htmland wrap content in a.layoutcontainer to reserve space for the sidebar..toc-bar) that expand and reveal.toc-labelon hover/focus and provide responsive styles for mobile (.toc-toggle,.toc.is-expanded).<h2>, auto-assigns stable IDs, builds.toc-linkentries, and highlights the active section usingIntersectionObserver.Testing
git diff --checkwith no reported issues.python3 -m http.server 4173 --directory docsand verified rendering in a headless browser.xmllint --html --noout docs/index.htmlbut thexmllintbinary was not available in the environment.Codex Task