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

Enhance NavBar hover effects

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"
+      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
-              :style="{ color: 'var(--primary-color)' }"
-              @mouseover="($event.target.style.color = 'var(--primary-color)')"
-              @mouseleave="($event.target.style.color = 'var(--secondary-color)')"
               @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">
+      <ul class="px-2">
-        <li v-for="l in links" :key="l.to">
+        <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: var(--text-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);
-  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 */
 }
 
 /* Scrollbar styling using primary color */