nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): transparent navbar with accent hover

Browse Source
This commit is contained in:
josedario87
2025-06-03 16:13:13 -06:00
parent 71e15de201
commit 5b522a4bc8
1 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ui/src/components/ui/NavBar.vue
View File

@@ -19,6 +19,15 @@ const route = useRoute()
const activePath = ref(route.path)
watch(route, v => (activePath.value = v.path))
const accentColorForPath = (path) => {
if (path.startsWith('/empleados')) return ui.accentColorEmpleados
if (path.startsWith('/tareas')) return ui.accentColorTareas
if (path.startsWith('/planillas')) return ui.accentColorPlanillas
if (path.startsWith('/asistencias')) return ui.accentColorAsistencias
if (path.startsWith('/config')) return ui.accentColorConfiguracion
return ui.accentColorChat
}
// clases dinámicas p/ mostrar / ocultar barra
const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')
@@ -39,16 +48,13 @@ const handleLinkClick = () => {
<!-- barra lateral -->
<aside
:class="['fixed left-0 top-0 md:top-14 h-screen w-60 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]"
style="background-color: var(--background-color); border-right-color: var(--secondary-color); border-right-width: 1px;">
style="background-color: transparent;">
<!-- encabezado dentro de sidebar -->
<div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
<span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
<button class="h-8 w-8 inline-flex items-center justify-center text-gray-500"
:style="{ color: 'var(--primary-color)' }"
@mouseover="($event.target.style.color = 'var(--primary-color)')"
@mouseleave="($event.target.style.color = 'var(--secondary-color)')"
<button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition"
@click="ui.toggleSidebar">
✕
</button>
@@ -62,6 +68,7 @@ const handleLinkClick = () => {
:to="l.to"
class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
:class="activePath.startsWith(l.to) ? 'active' : ''"
:style="{ '--accent-color': accentColorForPath(l.to) }"
@click="handleLinkClick"
>
<span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
@@ -77,18 +84,46 @@ const handleLinkClick = () => {
ul { list-style: none; padding-left: 0; }
.nav-link {
color: var(--text-color); /* Default text color */
position: relative;
color: var(--text-color);
background-color: transparent;
border: 1px solid var(--accent-color);
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 30%, transparent 30%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.nav-link:hover::before {
transform: scaleX(1);
}
.nav-link:hover {
color: var(--text-color);
}
.close-btn {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.close-btn:hover {
background-color: var(--secondary-color);
color: var(--primary-color); /* Text color on hover */
color: var(--background-color);
}
.nav-link.active {
background-color: var(--primary-color);
color: white; /* Assuming primary color is dark enough for white text */
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* Tailwind shadow-sm equivalent */
background-color: var(--accent-color);
color: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
}
/* Scrollbar styling using primary color */