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
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:
@@ -11,6 +11,15 @@
|
||||
|
||||
<transition name="dropdown">
|
||||
<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-label">Autenticación</div>
|
||||
<AuthIndicator class="menu-item-auth" />
|
||||
@@ -31,7 +40,7 @@
|
||||
|
||||
<script setup>
|
||||
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 AuthIndicator from './AuthIndicator.client.vue'
|
||||
import ThemeToggle from './ThemeToggle.client.vue'
|
||||
@@ -47,6 +56,11 @@ const closeMenu = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const goToHome = () => {
|
||||
window.location.href = '/'
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
// Cerrar el menú al hacer clic fuera
|
||||
const handleClickOutside = (event) => {
|
||||
if (menuContainer.value && !menuContainer.value.contains(event.target)) {
|
||||
@@ -139,6 +153,37 @@ onUnmounted(() => {
|
||||
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 {
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
|
||||
Reference in New Issue
Block a user