Commit d63b8a4
authored
Add adaptive left-hand TOC for GitHub Pages docs (#2)
### Motivation
- Improve navigation for the docs by adding a persistent left-side table
of contents that stays visually minimal until the user interacts with
it.
- Provide an accessible, touch-friendly alternative on small screens so
the TOC can be toggled and doesn't rely on hover.
### Description
- Add a slim fixed TOC shell and a `☰ Sections` toggle to
`docs/index.html` and wrap content in a `.layout` container to reserve
space for the sidebar.
- Implement CSS for low-visibility bar placeholders (`.toc-bar`) that
expand and reveal `.toc-label` on hover/focus and provide responsive
styles for mobile (`.toc-toggle`, `.toc.is-expanded`).
- Add runtime JS that enumerates each section's `<h2>`, auto-assigns
stable IDs, builds `.toc-link` entries, and highlights the active
section using `IntersectionObserver`.
- Detect touch devices with a media query and switch to a collapsible
TOC UX on touch devices so hover is not required.
### Testing
- Ran `git diff --check` with no reported issues.
- Served the docs via `python3 -m http.server 4173 --directory docs` and
verified rendering in a headless browser.
- Captured desktop and mobile screenshots using Playwright (Firefox) to
validate the expanded and collapsed states, which completed
successfully.
- Attempted `xmllint --html --noout docs/index.html` but the `xmllint`
binary was not available in the environment.
------
[Codex
Task](https://chatgpt.com/codex/tasks/task_e_69a83e194cd483328c44d041b65a14ef)1 parent 8bc5c1e commit d63b8a4
1 file changed
+389
-13
lines changed
0 commit comments