Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Visibilidad de iconos y botón de sesión en móvil

Browse Source
This commit is contained in:
Johan Samudio
2026-02-22 11:26:40 -05:00
parent 1b266c6724
commit f71439b1c4
2 changed files with 135 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
frontend/src/components/AppHeader.vue
View File

@ -18,17 +18,14 @@
<Transition name="menu-slide">
<div v-if="showMenu" class="menu-dropdown sibu-sidebar">
<div class="sibu-header-plain">
<div class="header-main-info">
<div class="brand-tag-simple">SIBU</div>
<div class="user-info-clean">
<div class="user-avatar-circle">
<span class="material-icons">{{ authStore.isAuthenticated ? 'account_circle' : 'fingerprint' }}</span>
<div v-if="authStore.isAuthenticated" class="status-dot"></div>
</div>
<div class="user-text-meta">
<span class="status-msg">{{ authStore.isAuthenticated ? 'USUARIO ACTIVO' : 'MODO INVITADO' }}</span>
<span class="user-name-text">{{ authStore.isAuthenticated ? authStore.userName : 'Invitado' }}</span>
</div>
<div class="user-profile-optimized">
<div class="user-avatar-main">
<span class="material-icons user-icon-accent">person</span>
<div v-if="authStore.isAuthenticated" class="status-dot-active"></div>
</div>
<div class="user-info-text">
<span class="welcome-label">HOLA,</span>
<span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : 'INVITADO' }}</span>
</div>
</div>
</div>
@ -36,62 +33,54 @@
<div class="menu-scroll-area">
<div v-if="authStore.isAdmin || authStore.isDriver || authStore.isPromoter" class="sidebar-group">
<div class="group-label">GESTIÓN</div>
<div v-if="authStore.isAdmin" class="sidebar-link admin-link" @click="navigateTo('/admin')">
<div v-if="authStore.isAdmin" class="sidebar-link" @click="navigateTo('/admin')">
<span class="material-icons">shield_person</span>
<span class="link-text">Panel de Control</span>
<span class="link-text">Panel Control</span>
</div>
<div v-if="authStore.isDriver" class="sidebar-link driver-link" @click="navigateTo('/driver')">
<div v-if="authStore.isDriver" class="sidebar-link" @click="navigateTo('/driver')">
<span class="material-icons">minor_crash</span>
<span class="link-text">Servicio Conductor</span>
</div>
<div v-if="authStore.isPromoter" class="sidebar-link promoter-link" @click="navigateTo('/promoter')">
<span class="material-icons">store</span>
<span class="link-text">Central Promotores</span>
<span class="link-text">Taxi Panel</span>
</div>
</div>
<div class="sidebar-group">
<div class="group-label">MENU</div>
<div class="sidebar-link" @click="navigateTo('/profile')">
<span class="material-icons">account_circle</span>
<span class="link-text">Mi Perfil</span>
</div>
<div class="group-label">OPERACIONES</div>
<div class="sidebar-link" @click="navigateTo('/favorites')">
<span class="material-icons">star</span>
<span class="material-icons">favorite</span>
<span class="link-text">Favoritos</span>
</div>
<div class="sidebar-link" @click="toggleLanguage">
<span class="material-icons">translate</span>
<span class="link-text">{{ locale === 'es' ? 'English (EN)' : 'Español (ES)' }}</span>
</div>
</div>
<div class="sidebar-group">
<div class="group-label">CONFIGURACIÓN</div>
<div class="sidebar-link" @click="toggleLanguage">
<span class="material-icons">translate</span>
<span class="link-text">{{ locale === 'es' ? 'Idioma: English' : 'Idioma: Español' }}</span>
</div>
<div class="group-label">APARIENCIA</div>
<div class="sidebar-link theme-toggle-row">
<span class="material-icons">palette</span>
<span class="link-text">Modo Oscuro</span>
<span class="material-icons">dark_mode</span>
<span class="link-text">Modo Visual</span>
<ThemeToggle class="sidebar-theme-switch" />
</div>
</div>
<div class="sidebar-group">
<div class="group-label">SOPORTE</div>
<div class="sidebar-link report-link" @click="openReportModal">
<div class="sidebar-link report-link-solid" @click="openReportModal">
<span class="material-icons">report_problem</span>
<span class="link-text">Enviar Reporte</span>
</div>
</div>
</div>
<div class="sidebar-footer-plain">
<div v-if="!authStore.isAuthenticated" class="footer-btn login" @click="navigateTo('/login')">
<span class="material-icons">power</span> INICIAR SESIÓN
</div>
<div v-else class="footer-btn logout" @click="handleLogout">
<span class="material-icons">power_settings_new</span> CERRAR SESIÓN
</div>
<div class="sibu-version-simple">SIBU v1.2.0</div>
<div class="sidebar-footer-fixed">
<button v-if="!authStore.isAuthenticated" class="session-btn login-solid" @click="navigateTo('/login')">
<span class="material-icons">login</span> INICIAR SESIÓN
</button>
<button v-else class="session-btn logout-solid" @click="handleLogout">
<span class="material-icons">logout</span> CERRAR SESIÓN
</button>
<div class="sibu-tag-footer">SIBU SYSTEM v1.2.0</div>
</div>
</div>
</Transition>
@ -227,7 +216,7 @@ const handleLogout = () => {
overflow: hidden;
}
/* SIBU SIDEBAR STYLES (SOLID) */
/* SIBU SIDEBAR OPTIMIZED */
.sibu-sidebar {
position: fixed;
top: 0;
@ -239,83 +228,74 @@ const handleLogout = () => {
z-index: 10000;
display: flex;
flex-direction: column;
box-shadow: 10px 0 30px rgba(0,0,0,0.2);
overflow: hidden;
box-shadow: 10px 0 40px rgba(0,0,0,0.3);
}
.sibu-header-plain {
padding: 40px 24px 20px;
padding: 50px 24px 20px;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
border-bottom: 2px solid var(--active-color);
}
.brand-tag-simple {
font-size: 12px;
font-weight: 900;
color: var(--active-color);
letter-spacing: 2px;
margin-bottom: 12px;
}
.user-info-clean {
.user-profile-optimized {
display: flex;
align-items: center;
gap: 12px;
gap: 15px;
}
.user-avatar-circle {
.user-avatar-main {
position: relative;
width: 48px;
height: 48px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--hover-bg);
background: var(--active-color);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border-color);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.user-avatar-circle .material-icons {
font-size: 28px;
color: var(--text-secondary);
.user-icon-accent {
font-size: 30px;
color: #101820 !important; /* Always dark for contrast against yellow */
}
.status-dot {
.status-dot-active {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
background: #4ade80;
border: 2px solid var(--bg-primary);
border-radius: 50%;
}
.user-text-meta {
.user-info-text {
display: flex;
flex-direction: column;
}
.status-msg {
font-size: 9px;
font-weight: 700;
.welcome-label {
font-size: 10px;
font-weight: 800;
color: var(--text-secondary);
letter-spacing: 0.5px;
}
.user-name-text {
font-size: 16px;
font-weight: 800;
.user-name-highlight {
font-size: 18px;
font-weight: 900;
color: var(--text-primary);
text-transform: uppercase;
}
.menu-scroll-area {
flex: 1;
overflow-y: auto;
padding: 20px 12px;
padding: 20px 15px;
display: flex;
flex-direction: column;
gap: 20px;
gap: 25px;
}
.sidebar-group {
@ -326,22 +306,22 @@ const handleLogout = () => {
.group-label {
font-size: 10px;
font-weight: 800;
color: var(--text-secondary);
padding: 0 12px 6px;
letter-spacing: 1px;
opacity: 0.7;
font-weight: 900;
color: var(--active-color);
padding: 0 10px 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.sidebar-link {
padding: 10px 12px;
border-radius: 10px;
padding: 12px 15px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
gap: 15px;
cursor: pointer;
color: var(--text-primary);
transition: all 0.2s;
transition: background 0.2s;
}
.sidebar-link:hover {
@ -349,7 +329,7 @@ const handleLogout = () => {
}
.sidebar-link .material-icons {
font-size: 20px;
font-size: 22px;
color: var(--text-secondary);
}
@ -358,8 +338,8 @@ const handleLogout = () => {
}
.link-text {
font-size: 14px;
font-weight: 600;
font-size: 15px;
font-weight: 700;
}
.theme-toggle-row {
@ -367,71 +347,79 @@ const handleLogout = () => {
}
.sidebar-theme-switch {
transform: scale(0.8);
margin-right: -5px;
transform: scale(0.9);
}
.report-link {
color: #ef4444;
}
.sidebar-footer-plain {
padding: 20px;
border-top: 1px solid var(--border-color);
background: var(--bg-primary);
}
.footer-btn {
padding: 12px;
.report-link-solid {
background: rgba(239, 68, 68, 0.1);
color: #ef4444 !important;
border-radius: 12px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 15px;
}
.sidebar-footer-fixed {
padding: 25px 20px;
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
margin-top: auto;
}
.session-btn {
width: 100%;
padding: 15px;
border-radius: 14px;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 800;
font-size: 12px;
font-weight: 900;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
transition: transform 0.2s, background 0.3s;
}
.footer-btn.login {
.session-btn.login-solid {
background: var(--active-color);
color: #101820;
}
.footer-btn.logout {
.session-btn.logout-solid {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.1);
border: 1.5px solid rgba(239, 68, 68, 0.2);
}
.footer-btn.logout:hover {
background: #ef4444;
color: white;
.session-btn:active {
transform: scale(0.98);
}
.sibu-version-simple {
margin-top: 12px;
.sibu-tag-footer {
margin-top: 15px;
text-align: center;
font-size: 9px;
font-size: 10px;
font-weight: 800;
color: var(--text-secondary);
opacity: 0.5;
opacity: 0.6;
}
/* Overlay & Transitions */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.4);
background: rgba(0,0,0,0.5);
z-index: 9999;
}
/* Transitions */
.menu-slide-enter-active,
.menu-slide-leave-active {
transition: transform 0.3s ease-out;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-slide-enter-from,
@ -443,17 +431,12 @@ const handleLogout = () => {
width: 44px;
height: 44px;
border-radius: 12px;
border: none;
background: transparent;
color: var(--text-primary);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.menu-btn-custom:hover {
background: var(--hover-bg);
}
</style>