https://github.com/wladyslaw13/sidebar-showcase

A modern sidebar component with smooth open/close animation, theme switcher (light/dark), and design tokens. Built with React and styled-components.
https://github.com/wladyslaw13/sidebar-showcase

animation component dark-mode design-tokens frontend light-theme react sidebar styled-components theme ui vite

Last synced: 2 months ago
JSON representation

A modern sidebar component with smooth open/close animation, theme switcher (light/dark), and design tokens. Built with React and styled-components.

• Host: GitHub
• URL: https://github.com/wladyslaw13/sidebar-showcase
• Owner: Wladyslaw13
• License: mit
• Created: 2025-06-20T17:31:36.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-20T18:08:39.000Z (12 months ago)
• Last Synced: 2025-06-20T18:43:30.224Z (12 months ago)
• Topics: animation, component, dark-mode, design-tokens, frontend, light-theme, react, sidebar, styled-components, theme, ui, vite
• Language: JavaScript
• Homepage: https://wladyslaw13.github.io/Sidebar-Showcase/
• Size: 2.64 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Sidebar Theme App

A modern, animated sidebar component with theme switching and design tokens.  

Built with React and styled-components.

![design](/src/assets/design.png)

## Features

- ✨ **Smooth open/close animation** (cubic-bezier, will-change)

- 🌗 **Light/Dark theme switcher** (with design tokens)

- 💾 **Theme and sidebar state saved in localStorage**

- 🧑‍💻 **Accessible**: tab focus, aria-labels, keyboard navigation

## Quick Start

```bash

git clone https://github.com/Wladyslaw13/Sidebar-Showcase.git

cd Sidebar-Showcase

npm install

npm run dev

```

## Project Structure

```

src/

  components/

    Sidebar/

      Sidebar.jsx

    ThemeToggle/

      ThemeToggle.jsx

  utils/

    theme.js

  App.jsx

  App.scss

  index.scss

```

## Customization

- Edit design tokens in `src/index.scss` and `src/utils/theme.js`

- Replace `src/assets/logo.png` with your own logo

## License

- MIT

---

## Made with ❤️