Sliding Theme Toggle Sidebar Menu

This is a Sliding Theme Toggle Sidebar Menu. It integrates an interactive light/dark mode switch directly into a scrollable navigation panel. Its function is to provide centralized control over the application’s visual environment while maintaining immediate access to primary routing options.

Specs

• Weight: < 2 KB logic and styling.
• Performance: Hardware-accelerated sliding animation (transform: translateX).
• Theming: Driven by a single data-theme attribute toggling color variables on the parent container.
• Responsiveness: Fixed width (270px). Requires additional media queries for mobile canvas integration.

Anatomy

• HTML: Divided into a header, a two-button theme switch wrapper, and a vertically scrolling menu list.
• CSS: SCSS nesting structures the states. The [data-theme="dark"] selector cascades color overrides down the tree. A cubic-bezier timing function dictates the toggle’s physical snap.
• JS: A minimal state manager. It listens for clicks on the theme buttons and mutates the parent’s data-theme attribute, triggering the CSS cascade.

Logic

The sliding toggle avoids animating heavy layout properties, prioritizing fluid rendering.

// JS sets the class state
selector.setAttribute('class', `selector ${theme.getAttribute('data-theme')}`);

// CSS handles the GPU-accelerated movement
&.dark {
  left: 100%;
  transform: translateX(-113%);
}

Instead of animating left or margin to move the indicator, it shifts the element using transform: translateX(). This ensures a fluid 60fps glide without triggering browser repaints, while the left: 100% anchor keeps it perfectly aligned to the opposite boundary regardless of the container’s absolute pixel width.

Feel

Direct and satisfying. The theme switch has a mechanical snap, reinforced by the cubic-bezier easing that simulates physical momentum. The interface shifts colors instantly without a fade delay, providing immediate, frictionless environmental control.