Skip to content

General UI cleanup: sidebar menu arrows and submenu alignment #36

Description

@FernandoCelmer

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

  • General visual audit of spacing/alignment across header and content area for similar inconsistencies (this issue covered the sidebar only)

Reference

Use docs/nav/development/component-showcase.md to visually review components while iterating.

Metadata

Metadata

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions