Skip to content

feat: add collapsible mobile ToC for in-page navigation#203

Merged
braboj merged 8 commits into
mainfrom
feat/mobile-toc
Apr 26, 2026
Merged

feat: add collapsible mobile ToC for in-page navigation#203
braboj merged 8 commits into
mainfrom
feat/mobile-toc

Conversation

@braboj

@braboj braboj commented Apr 26, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add MobileToc.astro component — collapsible "On this page" listing h2 headings
  • Placed after the h1 in DocLayout.astro, visible only at <=960px
  • Hidden on desktop where the sidebar ToC is available
  • Styled to match site theme with border, chevron indicator, and link colors
  • Closes Improve mobile ToC access from hamburger menu #110

Test plan

  • CI passes
  • On mobile/responsive (<=960px): "On this page" appears below the chapter title
  • Tapping expands to show h2 section links
  • Tapping a link scrolls to the section and collapses naturally
  • On desktop (>960px): mobile ToC is hidden, sidebar ToC visible as before

braboj and others added 8 commits April 26, 2026 13:45
Add an "On this page" details element that lists h2 headings,
visible only at <=960px where the sidebar ToC is hidden. Placed
after the h1 in every chapter page.

Closes #110

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace standalone MobileToc component with an "On this page" section
inside the hamburger nav panel. JS clones h2 links from the existing
sidebar-toc at runtime. Tapping a section link closes the panel and
scrolls to the heading.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The inline script ran before the sidebar-toc element was in the DOM,
so querySelector returned null and no links were added.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove ToC injection from hamburger menu. Add a dedicated sticky
"On this page" bar below the header, visible only at <=960px.
Expands to show h2 section links, closes on link tap or outside click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sticky positioning requires the element to be inside the scrolling
container. Moved from between Header and site-main to inside main.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Teal FAB in bottom-right corner on mobile. Tap to open an overlay
listing h2 section links. Closes on link tap or outside click.
Zero layout impact — no sticky, no header changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@braboj braboj merged commit 9ea2670 into main Apr 26, 2026
1 check passed
@braboj braboj deleted the feat/mobile-toc branch April 26, 2026 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve mobile ToC access from hamburger menu

1 participant