https://github.com/christianjjc/side-menu-bar-redux-toolkit
Side Menu bar (menú lateral) hecho con Vite + React + Redux Toolkit y Tailwindcss
https://github.com/christianjjc/side-menu-bar-redux-toolkit
clsx pnpm react react-router redux-toolkit sidebar sidemenu sidenav tailwindcss vite
Last synced: 4 months ago
JSON representation
Side Menu bar (menú lateral) hecho con Vite + React + Redux Toolkit y Tailwindcss
- Host: GitHub
- URL: https://github.com/christianjjc/side-menu-bar-redux-toolkit
- Owner: christianjjc
- Created: 2025-04-09T23:40:39.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-04-10T04:19:39.000Z (6 months ago)
- Last Synced: 2025-04-11T00:18:34.134Z (6 months ago)
- Topics: clsx, pnpm, react, react-router, redux-toolkit, sidebar, sidemenu, sidenav, tailwindcss, vite
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=aMHEgcqsar8
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Side Menú Bar --> Vite + Redux Toolkit + Tailwindcss
## [Míralo en Youtube](https://youtu.be/aMHEgcqsar8)
### Side Menú Bar (Menú lateral)
Este proyecto muestra cómo construir un **menú lateral (sidebar)** moderno y animado en una aplicación **SPA** (Single Page Application) usando:
- ⚛️ **React** con **Vite** y **TypeScript**
- 🧠 **Redux Toolkit** para manejar el estado global del sidebar
- 🎨 **TailwindCSS** para el diseño y animaciones suaves
Ideal para **dashboards**, paneles administrativos, o cualquier aplicación web donde necesites un menú lateral que se pueda mostrar u ocultar fácilmente.
---
## 🎯 Características
- Mostrar y ocultar el sidebar al hacer clic en un botón
- Animaciones suaves con Tailwind (transition, transform, translate, etc.)
- Estado global centralizado con Redux Toolkit
- Arquitectura limpia y mantenible con slices
- Proyecto base ideal para expandir hacia layouts más complejos
---
## 🧱 Tecnologías Usadas
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [TailwindCSS](https://tailwindcss.com/)
---
🤝 Contribuciones
¡Las contribuciones son bienvenidas! Si tienes mejoras, ideas o quieres expandir el componente con funcionalidades nuevas (submenús, responsive, integración con rutas, etc.), ¡no dudes en hacer un PR!
📜 Licencia
Este proyecto está bajo la licencia MIT.
No olvides seguirnos en nuestro canal para más videos. [code-soft](https://www.youtube.com/@code-soft)
