Problem (original report)
Sidebar menu had several rough visual edges:
- The collapse/expand chevron next to top-level items (
Settings, Development) didn't use the Dracula palette — it rendered with hardcoded black/white SVG strokes instead of a themed accent.
- Submenu items (
Favicon, Custom Highlight, Development Guide, Release Notes) were indented with margin-left: 10% / margin-top: 3%, which read as a loose, disconnected gap rather than a nested list under their parent.
- Navigating directly to a submenu page (e.g.
Development Guide) left its parent section collapsed, so there was no visual indication of where you were in the nav until you manually clicked it open.
Fixed in #37
- Chevron recolored via a CSS mask (
.btn-toggle::after) instead of a hardcoded SVG stroke: purple at rest, cyan on hover, pink when the section is expanded.
.drac-box-ternary / .drac-anchor-secondary indentation replaced with a fixed 0.75rem indent plus a border-left guide, so nested items visually belong to their parent.
menu.html / dropdown-menu.html now render collapse show and aria-expanded="true" for the section containing the current page (nav_item.active), auto-expanding it on load instead of requiring a manual click.
- Covered by
tests/test_sidebar_menu.py (active-section auto-expand, built against a real nested mkdocs site) and tests/test_sidebar_style.py (chevron palette variables, no hardcoded stroke colors, no percentage-based indent).
Remaining scope
Reference
Use docs/nav/development/component-showcase.md to visually review components while iterating.
Problem (original report)
Sidebar menu had several rough visual edges:
Settings,Development) didn't use the Dracula palette — it rendered with hardcoded black/white SVG strokes instead of a themed accent.Favicon,Custom Highlight,Development Guide,Release Notes) were indented withmargin-left: 10%/margin-top: 3%, which read as a loose, disconnected gap rather than a nested list under their parent.Development Guide) left its parent section collapsed, so there was no visual indication of where you were in the nav until you manually clicked it open.Fixed in #37
.btn-toggle::after) instead of a hardcoded SVG stroke: purple at rest, cyan on hover, pink when the section is expanded..drac-box-ternary/.drac-anchor-secondaryindentation replaced with a fixed0.75remindent plus aborder-leftguide, so nested items visually belong to their parent.menu.html/dropdown-menu.htmlnow rendercollapse showandaria-expanded="true"for the section containing the current page (nav_item.active), auto-expanding it on load instead of requiring a manual click.tests/test_sidebar_menu.py(active-section auto-expand, built against a real nested mkdocs site) andtests/test_sidebar_style.py(chevron palette variables, no hardcoded stroke colors, no percentage-based indent).Remaining scope
Reference
Use
docs/nav/development/component-showcase.mdto visually review components while iterating.