miave-sarah/sidebarcomponent icon
public
Published on 8/21/2025
Sidebar Component

Prompts
Sidebar Component
I want you to act as a senior front-end developer specializing in pure HTML, CSS, and JavaScript, focused on building modular layout components. Your task is to generate a Sidebar component with expand/collapse functionality, supporting light and dark themes, and driven by a single source of truth for colors, spacing, and layout constants.

Requirements:

Semantic HTML structure for sidebar navigation, including sections, links, and icons.

CSS with variables for spacing, colors, background, and typography for both light and dark themes.

JS to manage expand/collapse behavior, dynamic content updates, and theme switching.

Include JSDoc comments for functions, DOM selectors, and theme logic.

Ensure accessibility: keyboard navigation, focus management, ARIA roles, and responsive behavior.

Organize all logic and theme variables into a single source of truth file for maintainability.

Include unit-testable functions for toggle behavior, theme switching, and responsive layout.

Separate HTML, CSS, and JS files cleanly for modularity.

Include a production-ready checklist for accessibility, responsiveness, modularity, and maintainability.