From 78e62295e17b15cb0ae2c8179b01b2f85bb66181 Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Tue, 21 Apr 2026 17:57:40 -0500
Subject: [PATCH] added new icons

---
 .../layout/BarNavigation/BarNavigation.tsx    |  2 +-
 .../BarNavigation/BarNavigationServicio.tsx   | 56 +++++++++++++++++--
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/app/Components/layout/BarNavigation/BarNavigation.tsx b/app/Components/layout/BarNavigation/BarNavigation.tsx
index 24e6120..f3a8781 100644
--- a/app/Components/layout/BarNavigation/BarNavigation.tsx
+++ b/app/Components/layout/BarNavigation/BarNavigation.tsx
@@ -2,9 +2,9 @@
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import Image from "next/image";
 
 import "./BarNavigation.css";
-import Image from "next/image";
 
 export default function BarNavigation() {
   const [openMenu, setOpenMenu] = useState(false);
diff --git a/app/Components/layout/BarNavigation/BarNavigationServicio.tsx b/app/Components/layout/BarNavigation/BarNavigationServicio.tsx
index ce29ee4..aabda57 100644
--- a/app/Components/layout/BarNavigation/BarNavigationServicio.tsx
+++ b/app/Components/layout/BarNavigation/BarNavigationServicio.tsx
@@ -1,12 +1,21 @@
 "use client";
 import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+
 import "./BarNavigation.css";
 
 export default function BarNavigationServicio() {
   const [openMenu, setOpenMenu] = useState(false);
   const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
 
+  const pathname = usePathname();
+
+  const isActive = (paths: string[]) => {
+    return paths.some((path) => pathname.startsWith(path));
+  };
+
   const toggleMenu = () => setOpenMenu(!openMenu);
   const toggleSubMenu = (index: number) => {
     if (typeof window !== "undefined" && window.innerWidth <= 1000) {
@@ -28,8 +37,20 @@ export default function BarNavigationServicio() {
       </div>
 
       <ul className={openMenu ? "active" : ""}>
-        <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
+        <li
+          className={`subMenu 
+            ${openSubMenu === 0 ? "open" : ""}
+            ${isActive(["/Inscripcion", "/AgregarTiempo"]) ? "active" : ""}
+          `}>
+          <span onClick={() => toggleSubMenu(0)}>
+            <Image
+              src="/user-plus.svg"
+              alt="Logo FES"
+              width={16}
+              height={16}
+              color="#545454"
+            />
+            Inscripciones</span>
           <ul onClick={toggleMenu}>
             <Link
               href="/Inscripcion"
@@ -54,8 +75,20 @@ export default function BarNavigationServicio() {
           </ul>
         </li>
 
-        <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(1)}>Servicios</span>
+        <li
+          className={`subMenu 
+          ${openSubMenu === 1 ? "open" : ""}             
+          ${isActive(["/Impresiones", "/AsignacionMesas", "/AsignacionEquipo", "/Monitor"]) ? "active" : ""}
+          `}>
+          <span onClick={() => toggleSubMenu(1)}>
+            <Image
+              src="/briefcase.svg"
+              alt="Logo FES"
+              width={16}
+              height={16}
+              color="#545454"
+            />
+            Servicios</span>
           <ul onClick={toggleMenu}>
             <Link
               href="/Impresiones"
@@ -113,7 +146,10 @@ export default function BarNavigationServicio() {
           </Link>
         </li> */}
 
-        <li className="subMenu" onClick={toggleMenu}>
+        <li
+          className={`subMenu
+          ${isActive(["/ActivosMantenimiento"]) ? "active" : ""}
+          `} onClick={toggleMenu}>
           <Link
             href="/ActivosMantenimiento"
             className="links"
@@ -122,7 +158,15 @@ export default function BarNavigationServicio() {
               closeAllMenus();
             }}
           >
-            <span>Activos y en Mantenimiento</span>
+            <span>
+              <Image
+                src="/computer.svg"
+                alt="Logo FES"
+                width={16}
+                height={16}
+                color="#545454"
+              />
+              Activos y en Mantenimiento</span>
           </Link>
         </li>