adding new icons and new style of header

app/Components/layout/BarNavigation/BarNavigation.css

@@ -109,6 +109,8 @@
   color: #545454;
   font-size: 1.4rem;
   padding: 1rem;
+  display: flex;
+  gap: 10px;
 }
 
 .subMenu:hover>span,
@@ -116,6 +118,17 @@
   color: black;
 }
 
+.subMenu.active span {
+  color: black;
+  font-weight: bold;
+}
+
+
+.subMenu.active {
+  border-radius: 8px;
+  background-color: #f3f4f6;
+}
+
 .containerLinks {
   padding: 0 !important;
   border-radius: 0 0 4px 4px;
@@ -150,7 +163,7 @@ tbody {
   }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1100px) {
   .menuToggle {
     display: flex;
     position: relative;

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -1,12 +1,21 @@
 "use client";
 import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+
 import "./BarNavigation.css";
+import Image from "next/image";
 
 export default function BarNavigation() {
   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 BarNavigation() {
       </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 BarNavigation() {
           </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"
@@ -100,8 +133,20 @@ export default function BarNavigation() {
           </ul>
         </li>
 
-        <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(2)}>Equipo</span>
+        <li
+          className={`subMenu 
+          ${openSubMenu === 2 ? "open" : ""}
+          ${isActive(["/InformacionEquipo", "/ActivosMantenimiento", "/Mensajes", "/Programas"]) ? "active" : ""}            
+          `}>
+          <span onClick={() => toggleSubMenu(2)}>
+            <Image
+              src="/computer.svg"
+              alt="Logo FES"
+              width={16}
+              height={16}
+              color="#545454"
+            />
+            Equipo</span>
           <ul onClick={toggleMenu}>
             <Link
               href="/InformacionEquipo"
@@ -146,8 +191,21 @@ export default function BarNavigation() {
           </ul>
         </li>
 
-        <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(3)}>Reportes</span>
+        <li
+          className={`subMenu 
+        ${openSubMenu === 3 ? "open" : ""}
+        ${isActive(["/Reportes", "/Inscritos"]) ? "active" : ""}
+        `}>
+          <span onClick={() => toggleSubMenu(3)}>
+            <Image
+              src="/chart.svg"
+              alt="Logo FES"
+              width={16}
+              height={16}
+              color="#545454"
+            />
+            Reportes</span>
+
           <ul onClick={toggleMenu}>
             <Link
               href="/Reportes"
@@ -171,7 +229,11 @@ export default function BarNavigation() {
             </Link>
           </ul>
         </li>
-        <li className="subMenu" onClick={toggleMenu}>
+        <li
+          className={`subMenu
+          ${isActive(["/BitacoraSanciones"]) ? "active" : ""}
+          `}
+          onClick={toggleMenu}>
           <Link
             href="/BitacoraSanciones"
             className="links"
@@ -180,10 +242,22 @@ export default function BarNavigation() {
               closeAllMenus();
             }}
           >
-            <span>Bitácora y sanciones</span>
+            <span>
+              <Image
+                src="/clipboard.svg"
+                alt="Logo FES"
+                width={16}
+                height={16}
+                color="#545454"
+              />
+              Bitácora y sanciones</span>
           </Link>
         </li>
-        <li className="subMenu" onClick={toggleMenu}>
+        <li
+          className={`subMenu
+          ${isActive(["/CambiarPass"]) ? "active" : ""}
+          `}
+          onClick={toggleMenu}>
           <Link
             href="/CambiarPass"
             className="links"
@@ -192,7 +266,15 @@ export default function BarNavigation() {
               closeAllMenus();
             }}
           >
-            <span> Cambiar contraseña</span>
+            <span>
+              <Image
+                src="/key.svg"
+                alt="Logo FES"
+                width={16}
+                height={16}
+                color="#545454"
+              />
+              Cambiar contraseña</span>
           </Link>
         </li>
       </ul>

app/Components/layout/Header/Header.module.css

@@ -1,7 +1,7 @@
 .link {
   display: flex;
   align-items: center;
-  margin: 10px 5px;
+  margin: 5px 0px;
 }
 
 .logo {
@@ -42,7 +42,7 @@
   left: -20px;
   width: 100%;
   height: 30px;
-  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
+  background: linear-gradient(to right, #015cb8 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
@@ -128,7 +128,7 @@
 @media (max-width: 800px) {
   .yellowPart {
     left: 0;
-    background: #bd8c01;
+    background: #015cb8;
     transform: skew(0deg);
   }