Remix

Make your own version of La Económica Admin

Edit the prompt below and generate a customized version in seconds.

Original by Ana Lisseth Cortéz Quijada

Describe your app

Quiero crear el frontend de un sistema para un minisúper llamado “La Económica” usando Vue.js 3 con Composition API, Vue Router y Tailwind CSS. El backend será en Laravel, pero por ahora solo quiero desarrollar el frontend.

Necesito comenzar únicamente con el menú lateral desplegable (sidebar), similar al de la imagen de referencia.

🎯 Objetivo
Crear un sidebar moderno, profesional y reutilizable para escritorio (PC), que pueda abrirse y cerrarse al hacer clic en un botón de menú (icono hamburguesa). El diseño debe ajustarse correctamente a diferentes tamaños de pantalla, pero el enfoque principal es para computadoras.

🛠 Tecnologías
- Vue.js 3
- Composition API
- Vue Router
- Tailwind CSS
- Lucide Icons o Heroicons

📁 Estructura de componentes
- src/components/Sidebar.vue
- src/components/Navbar.vue
- src/views/Dashboard.vue
- src/App.vue

🎨 Diseño general
- Fondo del sidebar: verde oliva (#6B7450)
- Barra superior: degradado verde oscuro (#0B3D0B → #145214)
- Texto en blanco
- Elemento activo con fondo semitransparente
- Íconos a la izquierda de cada opción
- Diseño limpio, moderno y profesional

📌 Comportamiento del sidebar
1. El sidebar debe estar fijo en el lado izquierdo.
2. Debe poder expandirse y colapsarse.
3. Expandido: ancho de 240px.
4. Colapsado: ancho de 80px.
5. Mostrar transiciones suaves de 300 ms.
6. Cuando esté expandido, mostrar iconos y texto.
7. Cuando esté colapsado, mostrar solo iconos.
8. El contenido principal debe ajustarse automáticamente según el ancho del sidebar.

📋 Opciones del menú
Cada opción debe tener ícono y texto.

- Inicio
- Productos
- Ventas
- Compras
- Inventario
- Usuarios
- Reportes

Al final del sidebar, separado del resto, debe ir:
- Cerrar sesión

👤 Encabezado del sidebar
En la parte superior mostrar:
- Logo del negocio
- Nombre: La Económica
- Rol del usuario: Admin

Cuando el menú esté colapsado, mostrar únicamente el logo.

🧭 Navbar superior
Crear un componente Navbar con:
- Botón hamburguesa para abrir y cerrar el sidebar
- Título de la sección actual

📍 Vue Router
Configurar rutas para:
- /
- /productos
- /ventas
- /compras
- /inventario
- /usuarios
- /reportes

Cada opción del sidebar debe usar <router-link> y resaltar automáticamente la ruta activa.

📐 Adaptabilidad
El diseño debe ajustarse correctamente a diferentes resoluciones de pantalla en computadoras (laptops y monitores).

🧩 Requisitos del código
- Código limpio y bien comentado.
- Componentes reutilizables.
- Uso de Composition API con <script setup>.
- Las opciones del menú deben almacenarse en un array.
- Uso de computed para detectar la ruta activa.
- Comunicación entre Navbar y Sidebar mediante props y emits.

✨ Estilo visual deseado
El diseño debe parecer un sistema administrativo profesional para un minisúper:
- Moderno
- Ordenado
- Colores verdes corporativos
- Sombras suaves
- Bordes redondeados
- Excelente experiencia de usuario

📄 Resultado esperado
Generar todos los archivos necesarios para que el menú lateral funcione completamente:
- Sidebar.vue
- Navbar.vue
- Dashboard.vue
- router/index.js
- App.vue

Por ahora no crear tablas, formularios ni módulos adicionales. Solo desarrollar la estructura base con el menú lateral desplegable y la navegación funcional.

Free to use. No credit card required.