feat: agregar botón de Inicio al dropdown de configuración
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 25s

Agregar botón 'Inicio' con icono Home al dropdown de los 3 puntos.
El botón navega a la página principal y cierra el menú automáticamente.

Cambios:
- Importar icono Home de lucide-vue-next
- Agregar botón de Inicio como primera opción del menú
- Implementar función goToHome() para navegación
- Estilos con hover y active states
- Icono en color accent-primary para consistencia visual
This commit is contained in:
2025-10-17 04:12:47 -06:00
parent 01f7a0fd2a
commit 40945dc634

View File

@@ -11,6 +11,15 @@
<transition name="dropdown"> <transition name="dropdown">
<div v-if="isOpen" class="dropdown-menu glass"> <div v-if="isOpen" class="dropdown-menu glass">
<div class="menu-section">
<button class="menu-button" @click="goToHome">
<Home :size="18" class="menu-icon" />
<span>Inicio</span>
</button>
</div>
<div class="menu-divider"></div>
<div class="menu-section"> <div class="menu-section">
<div class="menu-label">Autenticación</div> <div class="menu-label">Autenticación</div>
<AuthIndicator class="menu-item-auth" /> <AuthIndicator class="menu-item-auth" />
@@ -31,7 +40,7 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { MoreVertical } from 'lucide-vue-next' import { MoreVertical, Home } from 'lucide-vue-next'
import IconButton from './IconButton.client.vue' import IconButton from './IconButton.client.vue'
import AuthIndicator from './AuthIndicator.client.vue' import AuthIndicator from './AuthIndicator.client.vue'
import ThemeToggle from './ThemeToggle.client.vue' import ThemeToggle from './ThemeToggle.client.vue'
@@ -47,6 +56,11 @@ const closeMenu = () => {
isOpen.value = false isOpen.value = false
} }
const goToHome = () => {
window.location.href = '/'
closeMenu()
}
// Cerrar el menú al hacer clic fuera // Cerrar el menú al hacer clic fuera
const handleClickOutside = (event) => { const handleClickOutside = (event) => {
if (menuContainer.value && !menuContainer.value.contains(event.target)) { if (menuContainer.value && !menuContainer.value.contains(event.target)) {
@@ -139,6 +153,37 @@ onUnmounted(() => {
justify-content: flex-start; justify-content: flex-start;
} }
.menu-button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.menu-button:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(2px);
}
.menu-button:active {
transform: translateX(2px) scale(0.98);
}
.menu-icon {
color: var(--accent-primary);
flex-shrink: 0;
}
.menu-divider { .menu-divider {
height: 1px; height: 1px;
background: linear-gradient( background: linear-gradient(