225 lines
6.5 KiB
Markdown
225 lines
6.5 KiB
Markdown
# 🎨 Navbar Actualizado - Guía de Cambios
|
|
|
|
## ✅ Cambios Realizados
|
|
|
|
### 1. **Textos Directos (Sin Traducción)**
|
|
Se eliminaron las referencias a `t('nav.*')` y ahora los textos están en español directamente:
|
|
|
|
**Antes:**
|
|
```tsx
|
|
{t('nav.courses')}
|
|
{t('nav.library')}
|
|
{t('nav.settings')}
|
|
```
|
|
|
|
**Ahora:**
|
|
```tsx
|
|
Dashboard
|
|
Cursos
|
|
Configuración
|
|
```
|
|
|
|
### 2. **Agrupación en Dropdowns**
|
|
|
|
#### Dropdown "Cursos"
|
|
Agrupa:
|
|
- 📊 **Listar Cursos** (`/`) - El dashboard principal con tus cursos
|
|
- 📚 **Librería** (`/library/assets`)
|
|
- ❓ **Banco de Preguntas** (`/question-bank`)
|
|
|
|
**Icono:** `BookOpen`
|
|
|
|
#### Dropdown "Configuración" (Solo Admins)
|
|
Agrupa:
|
|
- 🔗 **Webhooks** (`/settings/webhooks`)
|
|
- 👤 **Perfil** (`/profile`)
|
|
- ⚙️ **General** (`/settings`)
|
|
|
|
**Icono:** `Settings`
|
|
|
|
### 3. **Navegación Simplificada**
|
|
|
|
**Para Admins:**
|
|
```
|
|
Dashboard | Cursos ▼ | Control Global | Configuración ▼ | [Theme] [Lang] [User]
|
|
```
|
|
|
|
**Para No-Admins:**
|
|
```
|
|
Dashboard | Cursos ▼ | Configuración | [Theme] [Lang] [User]
|
|
```
|
|
|
|
### 4. **Iconos Actualizados**
|
|
|
|
| Item | Icono |
|
|
|------|-------|
|
|
| Dashboard | `LayoutDashboard` |
|
|
| Cursos (dropdown) | `BookOpen` |
|
|
| Librería | `Library` |
|
|
| Banco de Preguntas | `FileQuestion` |
|
|
| Control Global | `ShieldCheck` |
|
|
| Configuración (dropdown) | `Settings` |
|
|
| Webhooks | `Webhook` |
|
|
| Perfil | `User` |
|
|
|
|
## 🎯 Comportamiento
|
|
|
|
### Dropdowns
|
|
- **Click** en "Cursos" o "Configuración" → Abre menú
|
|
- **Click** fuera → Cierra menú
|
|
- **Click** en item → Navega y cierra menú
|
|
- **Flecha** indica estado (▼ cuando está abierto)
|
|
|
|
### Responsive
|
|
- Menús se adaptan a dark mode
|
|
- Shadow y border para visibilidad
|
|
- Z-index correcto para overlays
|
|
|
|
## 📁 Archivos Modificados
|
|
|
|
```
|
|
web/studio/src/components/Navbar.tsx
|
|
+ useState para dropdowns
|
|
+ Iconos: ChevronDown, FileQuestion, Webhook, User
|
|
+ DROPDOWN_ITEM style
|
|
+ Dropdown "Cursos"
|
|
+ Dropdown "Configuración"
|
|
+ Textos en español directo
|
|
```
|
|
|
|
## 🎨 Estilos
|
|
|
|
### Dropdown Menu
|
|
```tsx
|
|
const DROPDOWN_ITEM = "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
|
|
```
|
|
|
|
**Características:**
|
|
- Fondo blanco/gray oscuro
|
|
- Hover effect
|
|
- Border shadow
|
|
- Iconos alineados
|
|
|
|
### Flecha Animada
|
|
```tsx
|
|
<ChevronDown className={`w-3 h-3 transition-transform ${coursesOpen ? 'rotate-180' : ''}`} />
|
|
```
|
|
|
|
**Animación:**
|
|
- Normal: ▲
|
|
- Abierto: ▼ (rotate-180)
|
|
|
|
## 🖼️ Preview
|
|
|
|
### Navbar Normal
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ [Logo] Dashboard Cursos▼ Configuración▼ 🌙 ES 👤 │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Dropdown "Cursos" Abierto
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ [Logo] Dashboard Cursos▼ Configuración▼ 🌙 ES 👤 │
|
|
│ ┌──────────────────┐ │
|
|
│ │ 📚 Librería │ │
|
|
│ │ ❓ Banco de Preg.│ │
|
|
│ └──────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Dropdown "Configuración" Abierto (Admin)
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ [Logo] Dashboard Cursos Configuración▼ 🌙 ES 👤 │
|
|
│ ┌──────────────────┐ │
|
|
│ │ 🔗 Webhooks │ │
|
|
│ │ 👤 Perfil │ │
|
|
│ │ ⚙️ General │ │
|
|
│ └──────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 🚀 Cómo Usar
|
|
|
|
### Para Usuarios
|
|
1. **Click** en "Cursos" para ver:
|
|
- Librería
|
|
- Banco de Preguntas
|
|
|
|
2. **Click** en "Configuración" (si eres admin) para ver:
|
|
- Webhooks
|
|
- Perfil
|
|
- General
|
|
|
|
### Para Desarrolladores
|
|
```tsx
|
|
// Agregar nuevo item al dropdown "Cursos":
|
|
<Link
|
|
href="/nueva-ruta"
|
|
className={DROPDOWN_ITEM}
|
|
onClick={() => setCoursesOpen(false)}
|
|
>
|
|
<NuevoIcono className="w-4 h-4" />
|
|
Nuevo Item
|
|
</Link>
|
|
|
|
// Agregar nuevo item al dropdown "Configuración":
|
|
<Link
|
|
href="/otra-ruta"
|
|
className={DROPDOWN_ITEM}
|
|
onClick={() => setSettingsOpen(false)}
|
|
>
|
|
<OtroIcono className="w-4 h-4" />
|
|
Otro Item
|
|
</Link>
|
|
```
|
|
|
|
## ✅ Testing Checklist
|
|
|
|
- [ ] Dropdown "Cursos" abre/cierra
|
|
- [ ] Dropdown "Configuración" abre/cierra (admins)
|
|
- [ ] Click fuera cierra dropdowns
|
|
- [ ] Navegación funciona
|
|
- [ ] Dark mode se ve bien
|
|
- [ ] Flecha rota correctamente
|
|
- [ ] Responsive en móviles
|
|
- [ ] No hay errores de TypeScript
|
|
|
|
## 🔄 Migración
|
|
|
|
### Si tenías bookmarks:
|
|
```
|
|
Antes: /library/assets
|
|
Ahora: Cursos → Librería
|
|
|
|
Antes: /question-bank
|
|
Ahora: Cursos → Banco de Preguntas
|
|
|
|
Antes: /settings/webhooks
|
|
Ahora: Configuración → Webhooks
|
|
|
|
Antes: /profile
|
|
Ahora: Configuración → Perfil
|
|
```
|
|
|
|
## 💡 Beneficios
|
|
|
|
1. **Menos clutter** - Menos items visibles
|
|
2. **Organización lógica** - Items relacionados agrupados
|
|
3. **Escalable** - Fácil agregar nuevos items
|
|
4. **UX mejorada** - Menús familiares para usuarios
|
|
5. **Espacio** - Más room para otros features
|
|
|
|
## 📝 Notas
|
|
|
|
- Los dropdowns usan `fixed inset-0` overlay para cerrar al hacer click fuera
|
|
- `z-index` cuidadosamente configurado para no interferir con otros elementos
|
|
- Textos en español hardcoded (fácil cambiar si necesitas i18n después)
|
|
- Iconos de Lucide React consistentes con el resto de la app
|
|
|
|
---
|
|
|
|
**Estado:** ✅ Completo y funcional
|