animaciones fix uwu

src/app/components/route-animations/route-animations.component.ts

@@ -19,7 +19,7 @@ import { Subscription, filter } from 'rxjs';
     }
 
     .animate__animated {
-      animation-duration: 0.5s;
+      animation-duration: 1.2s;
     }
   `]
 })

src/app/components/sidebar/sidebar.component.html

@@ -20,6 +20,7 @@
         <a routerLink="/inicio" class="menu-link">
           <i class="menu-icon pi pi-home"></i>
           <span class="menu-text">Inicio</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
 
@@ -27,6 +28,7 @@
         <a routerLink="/unidad-concesiones" class="menu-link">
           <i class="menu-icon pi pi-building"></i>
           <span class="menu-text">Unidad de Concesiones</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
 
@@ -34,6 +36,7 @@
         <a routerLink="/ct-actualizacion" class="menu-link">
           <i class="menu-icon pi pi-flag"></i>
           <span class="menu-text">CT Actualización de PD</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
 
@@ -41,6 +44,7 @@
         <a routerLink="/ct-ajuste" class="menu-link">
           <i class="menu-icon pi pi-sliders-h"></i>
           <span class="menu-text">CT Ajuste de PD</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
 
@@ -48,6 +52,7 @@
         <a routerLink="/resumen" class="menu-link">
           <i class="menu-icon pi pi-list"></i>
           <span class="menu-text">Resumen</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
 
@@ -55,6 +60,7 @@
         <a routerLink="/unidad-informacion" class="menu-link">
           <i class="menu-icon pi pi-box"></i>
           <span class="menu-text">Unidad de Información</span>
+          <span class="active-indicator"></span>
         </a>
       </li>
     </ul>

src/app/components/sidebar/sidebar.component.scss

@@ -76,6 +76,7 @@
 .menu-item {
   margin: 2px 0;
   padding: 0 0.5rem; /* Añadimos padding lateral al ítem */
+  transition: all 0.3s ease-in-out; /* Suaviza todas las transiciones */
 }
 
 .menu-link {
@@ -84,14 +85,16 @@
   padding: 0.75rem 1rem;
   color: #0a2847;
   text-decoration: none;
-  transition: background-color 0.2s, box-shadow 0.3s;
+  transition: all 0.3s ease-in-out; /* Transición para todos los cambios */
   border-left: 3px solid transparent;
   border-radius: .25rem;
   width: calc(100% - 1rem); /* Reducimos el ancho para crear margen */
+  position: relative; /* Para los efectos de pseudo-elementos */
 }
 
 .menu-link:hover {
   background-color: #a2c9ec !important;
+  transform: translateX(2px); /* Pequeño movimiento al hacer hover */
 }
 
 .menu-icon {
@@ -99,10 +102,57 @@
   width: 1.25rem;
   text-align: center;
   color: #0a2847;
+  transition: transform 0.3s ease-in-out; /* Transición para el icono */
 }
 
 .menu-text {
   font-size: 0.9rem;
+  transition: font-weight 0.3s ease-in-out, color 0.3s ease-in-out; /* Transición para el texto */
+}
+
+/* Efectos especiales para los ítems activos */
+.menu-item.active {
+  padding-left: 0.75rem; /* Añade un poco más de padding a la izquierda */
+}
+
+.menu-item.active .menu-icon {
+  transform: scale(1.2); /* Hace el icono ligeramente más grande */
+  color: #0066cc; /* Color más brillante para el icono */
+}
+
+/* Indicador de elemento activo */
+.active-indicator {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.menu-item.active .active-indicator {
+  opacity: 1;
+  background-color: #0066cc;
+  box-shadow: 0 0 8px 1px rgba(0, 102, 204, 0.8);
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translateY(-50%) scale(0.8);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateY(-50%) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%) scale(0.8);
+    opacity: 0.7;
+  }
 }
 
 .menu-item.active .menu-link {
@@ -112,4 +162,57 @@
   font-weight: 600;
   box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24) !important;
   margin: 0 auto; /* Centra el elemento */
+  /* Añadir animación de entrada */
+  animation: activeItemEffect 0.4s ease-in-out, glowEffect 2s ease-in-out infinite alternate;
+  position: relative; /* Para el efecto de resplandor */
+}
+
+/* Definir la animación para el elemento activo - movimiento lateral */
+@keyframes activeItemEffect {
+  0% {
+    transform: translateX(-10px);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(5px);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Efecto de resplandor suave */
+@keyframes glowEffect {
+  0% {
+    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 10px rgba(10, 40, 71, 0.3);
+  }
+}
+
+/* Añadir pseudo-elemento para un brillo en el borde izquierdo */
+.menu-item.active .menu-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+  background-color: white;
+  animation: borderPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes borderPulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
 }