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">
|
<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(
|
||||||
|
|||||||
Reference in New Issue
Block a user