bug: sidebar title styling too similar to toggle and page items

[jencastrodoesstuff]

Problem

The left sidebar's title styling is too similar to the toggle elements and page links beneath it, making it difficult to distinguish the hierarchy and parse the navigation structure. The current monochrome styling doesn't provide enough visual distinction.

Current Behaviour

• Sidebar title uses similar color/styling as navigation items
• Lack of visual hierarchy makes it hard to distinguish sections
• Navigation structure is difficult to parse quickly
• All elements blend together visually

Screenshot

Expected Behaviour

• Sidebar title should be visually distinct from navigation items
• Clear hierarchy between title, categories, and pages
• Improved scannability and navigation structure

Proposed Solution

Enhance the sidebar title with distinct styling:

• Background: Dark grey (#838996 / Roman Silver / rgb(131,137,150))
• Text: Light grey (#e5e4e2 / Platinum / rgb(229,228,226))
• Consider different font weight, size, or spacing for additional distinction

Technical Context

This requires customizing Docusaurus sidebar theme components:

• Likely involves creating/modifying theme components in src/theme/DocSidebar/
• May also need CSS customizations in src/css/custom.css
• Should maintain consistency with overall site design

Acceptance Criteria

• Sidebar title has distinct background color (#838996)
• Sidebar title uses light text color (#e5e4e2)
• Clear visual hierarchy between title, toggles, and pages
• Styling works in both light and dark mode (if applicable)
• No regressions in sidebar functionality
• Improved readability verified by design review

Implementation Approach

Option 1: Theme Swizzling

• Swizzle the DocSidebar component
• Add custom styling to the title element

Option 2: CSS Customization

/* In src/css/custom.css */
.theme-doc-sidebar-container [class*='sidebarLogo'] {
  background-color: #838996;
  color: #e5e4e2;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

Option 3: Hybrid

• Combine CSS custom properties with minimal theme override

Investigation Steps

1. Inspect current sidebar structure in browser dev tools
2. Identify exact element classes for the sidebar title
3. Check existing theme overrides in src/theme/
4. Review src/css/custom.css for sidebar-related styles
5. Test proposed colors for accessibility (WCAG contrast ratio)
6. Consider dark mode compatibility

Color Accessibility Check

• Background: #838996 (Roman Silver)
• Text: #e5e4e2 (Platinum)
• Should verify WCAG AA contrast ratio (4.5:1 minimum for normal text)

Related Files

• src/css/custom.css
• src/theme/DocSidebar/ (if swizzled)
• docusaurus.config.ts (theme color configuration)

Notes

This change should improve information hierarchy and make the documentation easier to navigate, especially for new users.