Conversation
Implement native HTML5 <details> elements for TOC collapsibility: - Headings with sub-headings are now collapsible/expandable - All sections open by default for immediate document overview - Uses recursive algorithm to build properly nested structure - Zero JavaScript dependencies - leverages native browser functionality - Includes smooth CSS transitions and custom chevron indicators - Maintains accessibility with built-in keyboard navigation Updated documentation: - README: Added collapsible TOC to features list - Architecture: Documented TOC implementation and collapsibility logic - Added comprehensive test file with deeply nested headings File changes: - Modified generateTOC() function to use recursive tree-building - Added CSS styles for details/summary elements - Code increased from ~677 to ~748 lines (+71 lines)
…sections Fixed issue where clicking TOC items caused layout problems: - Added stopPropagation() to link clicks to prevent summary toggle - Added click handler on summary to prevent toggle when clicking links - Now: click chevron to collapse/expand, click text to navigate - Prevents conflicting events that were causing sidebar overlap This ensures clean separation between navigation and collapse/expand actions.
Removed flexbox from body element that was causing layout conflicts: - Body no longer uses display: flex (conflicted with fixed sidebar) - Content element no longer uses flex: 1 (not needed in block layout) - Added min-height: 100vh and width: auto for proper content sizing This ensures stable layout where sidebar stays fixed on left (280px) and content area maintains proper margin-left without overlap issues when collapsing/expanding TOC sections.
Added explicit active state rules for levels 3-6 to override grey text: - Levels 4-6 had grey text (color: #666) that wasn't changing to white when active - CSS specificity issue: grey color rule had same specificity as active state - Solution: Added more specific .toc-level-X .toc-link.active rules - Now all levels (1-6) consistently show white text on blue background when active This ensures proper contrast and consistent visual feedback across all heading levels.
Simplified TOC styling by using same color for all heading levels: - Removed grey color (#666) from levels 4-6 - All levels now use consistent blue (#0066cc) - Removed now-unnecessary active state overrides - Visual hierarchy still maintained through font-size differences only - Simpler CSS with fewer special cases to maintain Result: Cleaner, more consistent UI with better maintainability.
Added [Unreleased] section documenting: - New collapsible/expandable TOC sections using HTML5 details - Native browser accessibility features - Bug fixes for click conflicts, layout overlap, and active state highlighting - Styling consistency improvements across all TOC levels - Code size increase (~677 to ~748 lines)
kanad13
deleted the
claude/collapsible-outline-sidebar-011CUtX9Nm3rQUTNgW4YzmH2
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.