From 5b522a4bc8181d10d25f521934e5857b0d818a87 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Tue, 3 Jun 2025 16:13:13 -0600
Subject: [PATCH 1/4] style(ui): transparent navbar with accent hover

---
 ui/src/components/ui/NavBar.vue | 55 +++++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index c305835..cc7d889 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -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 */

From 49eaa67627de410b54964944b99d2cac188fe44e Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Tue, 3 Jun 2025 16:19:14 -0600
Subject: [PATCH 2/4] Refine NavBar hover gradient

---
 ui/src/components/ui/NavBar.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index cc7d889..8b95074 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -95,7 +95,10 @@ ul { list-style: none; padding-left: 0; }
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 30%, transparent 30%);
+  background: linear-gradient(to right,
+      var(--accent-color) 0%,
+      var(--background-color) 30%,
+      var(--background-color) 100%);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
@@ -121,11 +124,14 @@ ul { list-style: none; padding-left: 0; }
 }
 
 .nav-link.active {
-  background-color: var(--accent-color);
-  color: white;
+  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);
 }
 
+.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; }

From e066250601a85816fbe202960a2054179ba1e203 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Tue, 3 Jun 2025 16:25:57 -0600
Subject: [PATCH 3/4] Refine NavBar styles

---
 ui/src/components/ui/NavBar.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 8b95074..d9a0601 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -54,7 +54,7 @@ const handleLinkClick = () => {
     <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="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition"
+      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
               @click="ui.toggleSidebar">
         ✕
       </button>
@@ -62,7 +62,7 @@ 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">
+      <ul class="space-y-2 px-2">
         <li v-for="l in links" :key="l.to">
           <RouterLink
             :to="l.to"
@@ -86,9 +86,10 @@ ul { list-style: none; padding-left: 0; }
 .nav-link {
   position: relative;
   color: var(--text-color);
-  background-color: transparent;
+  background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   overflow: hidden;
+  transition: color 0.3s ease;
 }
 
 .nav-link::before {

From 5055e8ae476ac74a3b5180a76c0de6ef557da2b4 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Tue, 3 Jun 2025 16:32:38 -0600
Subject: [PATCH 4/4] Fix NavBar gradient hover and spacing

---
 ui/src/components/ui/NavBar.vue | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index d9a0601..34f862b 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -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; }