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

Fix NavBar gradient hover and spacing

Browse Source
This commit is contained in:
josedario87
2025-06-03 16:32:38 -06:00
parent e066250601
commit 5055e8ae47
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,8 +62,8 @@ const handleLinkClick = () => {
<!-- navegación -->
<nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
<ul class="space-y-2 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"
@@ -89,7 +89,9 @@ ul { list-style: none; padding-left: 0; }
background-color: var(--background-color);
border: 1px solid var(--accent-color);
overflow: hidden;
transition: color 0.3s ease;
border-radius: 0.375rem;
transition: background-color 0.3s ease, color 0.3s ease;
z-index: 0;
}
.nav-link::before {
@@ -98,16 +100,17 @@ ul { list-style: none; padding-left: 0; }
inset: 0;
background: linear-gradient(to right,
var(--accent-color) 0%,
var(--accent-color) 20%,
var(--background-color) 30%,
var(--background-color) 100%);
transform: scaleX(0);
transform-origin: left;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: -1;
}
.nav-link:hover::before {
transform: scaleX(1);
.nav-link:hover::before,
.nav-link.active::before {
transform: translateX(0);
}
.nav-link:hover {
@@ -129,10 +132,6 @@ ul { list-style: none; padding-left: 0; }
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
}
.nav-link.active::before {
transform: scaleX(1);
}
/* Scrollbar styling using primary color */
.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }