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

Merge pull request #33 from josedario87/codex/improve-navbar-design-and-animations

Browse Source 
Enhance NavBar hover effects
This commit is contained in:
josedario87
2025-06-03 16:33:20 -06:00
committed by GitHub
parent 361e70fcec 5055e8ae47
commit bce7427fee
1 changed files with 53 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
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 duration-200"
@click="ui.toggleSidebar">
✕
</button>
@@ -56,12 +62,13 @@ const handleLinkClick = () => {
<!-- navegación -->
<nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
<ul class="space-y-1 px-2">
<li v-for="l in links" :key="l.to">
<ul class="px-2">
<li v-for="l in links" :key="l.to" class="mb-2 last:mb-0">
<RouterLink
: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,52 @@ 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: var(--background-color);
border: 1px solid var(--accent-color);
overflow: hidden;
border-radius: 0.375rem;
transition: background-color 0.3s ease, color 0.3s ease;
z-index: 0;
}
.nav-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right,
var(--accent-color) 0%,
var(--accent-color) 20%,
var(--background-color) 30%,
var(--background-color) 100%);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: -1;
}
.nav-link:hover::before,
.nav-link.active::before {
transform: translateX(0);
}
.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 */
color: var(--text-color);
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 */