fixed header

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -43,7 +43,7 @@ function QuitarSancion({ data }: Props) {
               <th>Motivo Sanción</th>
               <th>Duración (semanas)</th>
               <th>Fecha Sanción</th>
-              <th>Podría utilizar el servicio hasta</th>
+              <th>Podra utilizar el servicio hasta</th>
             </tr>
           </thead>
           <tbody>

app/Components/layout/BarNavigation/BarNavigation.css

@@ -21,7 +21,9 @@
   cursor: pointer;
   color: #585858;
   width: 100%;
-  transition: background-color 0.3s ease, border 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border 0.3s ease;
   font-size: 1.5rem;
 }
 
@@ -71,7 +73,9 @@
   border-radius: 8px;
   background-color: #ffffff;
   transition: color 0.3s ease;
-  transition: opacity 0.4s ease, max-height 0.4s ease;
+  transition:
+    opacity 0.4s ease,
+    max-height 0.4s ease;
 }
 
 .subMenu ul a {
@@ -87,11 +91,6 @@
   color: #101113;
 }
 
-.subMenu:hover ul {
-  opacity: 1;
-  max-height: 500px;
-}
-
 .subMenu:hover ul a {
   display: flex;
 }
@@ -138,6 +137,13 @@ tbody {
   font-size: 1.25rem;
 }
 
+@media (min-width: 1001px) {
+  .subMenu:hover ul {
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+
 @media (max-width: 1000px) {
   .menuToggle {
     display: flex;
@@ -153,7 +159,7 @@ tbody {
 
   .barNavigation {
     font-size: 15px;
-    display: block;
+    justify-content: end;
   }
 
   .barNavigation ul {
@@ -171,7 +177,9 @@ tbody {
 
     pointer-events: none;
 
-    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out,
+    transition:
+      transform 0.35s ease-in-out,
+      opacity 0.35s ease-in-out,
       visibility 0.35s ease-in-out;
   }
 
@@ -194,6 +202,10 @@ tbody {
     padding: 0;
   }
 
+  .barNavigation li {
+    color: white;
+  }
+
   .barNavigation li:hover {
     color: white;
     border-radius: 0;
@@ -205,14 +217,16 @@ tbody {
     top: 0px;
     width: 100%;
     background-color: rgb(1, 92, 184);
-
     max-height: 0;
     opacity: 0;
     overflow: hidden;
 
     transform: translateY(-5px);
 
-    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
+    transition:
+      max-height 0.35s ease,
+      opacity 0.3s ease,
+      transform 0.3s ease;
   }
 
   .subMenu.open ul {
@@ -221,8 +235,9 @@ tbody {
     transform: translateY(0);
   }
 
-  .subMenu ul {
-    opacity: 0;
+  .subMenu.open ul a{
+    display: flex;
+    pointer-events:auto;
   }
 
   thead,

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -14,6 +14,11 @@ function BarNavigation() {
     }
   };
 
+  const closeAllMenus = () => {
+    setOpenMenu(false);
+    setOpenSubMenu(null);
+  };
+
   return (
     <nav className="barNavigation">
       <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
@@ -25,11 +30,25 @@ function BarNavigation() {
       <ul className={openMenu ? "active" : ""}>
         <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
-          <ul className="containerLinks" onClick={toggleMenu}>
-            <Link href="/AgregarTiempo" className="links">
+          <ul onClick={toggleMenu}>
+            <Link
+              href="/AgregarTiempo"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Agregar Tiempo</li>
             </Link>
-            <Link href="/Inscripcion" className="links">
+            <Link
+              href="/Inscripcion"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Inscripción Usuario</li>
             </Link>
           </ul>
@@ -38,16 +57,44 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(1)}>Servicios</span>
           <ul onClick={toggleMenu}>
-            <Link href="/Impresiones" className="links">
+            <Link
+              href="/Impresiones"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Impresiones y Ploteo</li>
             </Link>
-            <Link href="/AsignacionMesas" className="links">
+            <Link
+              href="/AsignacionMesas"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Asignacion de Mesas</li>
             </Link>
-            <Link href="/AsignacionEquipo" className="links">
+            <Link
+              href="/AsignacionEquipo"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Asignacion de Equipos</li>
             </Link>
-            <Link href="/Monitor" className="links">
+            <Link
+              href="/Monitor"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Monitor</li>
             </Link>
           </ul>
@@ -56,16 +103,44 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(2)}>Equipo</span>
           <ul onClick={toggleMenu}>
-            <Link href="/InformacionEquipo" className="links">
+            <Link
+              href="/InformacionEquipo"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Informacion de Equipos</li>
             </Link>
-            <Link href="/ActivosMantenimiento" className="links">
+            <Link
+              href="/ActivosMantenimiento"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Activos y en Mantenimiento</li>
             </Link>
-            <Link href="/Mensajes" className="links">
+            <Link
+              href="/Mensajes"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Mensajes</li>
             </Link>
-            <Link href="/Programas" className="links">
+            <Link
+              href="/Programas"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Programas</li>
             </Link>
           </ul>
@@ -74,24 +149,59 @@ function BarNavigation() {
         <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
           <span onClick={() => toggleSubMenu(3)}>Reportes</span>
           <ul onClick={toggleMenu}>
-            <Link href="/Reportes" className="links">
+            <Link
+              href="/Reportes"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Reportes</li>
             </Link>
-            <Link href="/Inscritos" className="links">
+            <Link
+              href="/Inscritos"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Inscritos</li>
             </Link>
-            <Link href="/BitacoraSanciones" className="links">
+            <Link
+              href="/BitacoraSanciones"
+              className="links"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeAllMenus();
+              }}
+            >
               <li>Bitacora y sanciones</li>
             </Link>
           </ul>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/QuitarSancion" className="links">
+          <Link
+            href="/QuitarSancion"
+            className="links"
+            onClick={(e) => {
+              e.stopPropagation();
+              closeAllMenus();
+            }}
+          >
             <span>Quitar sanción</span>
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/CambiarPass" className="links">
+          <Link
+            href="/CambiarPass"
+            className="links"
+            onClick={(e) => {
+              e.stopPropagation();
+              closeAllMenus();
+            }}
+          >
             <span> Cambiar contraseña</span>
           </Link>
         </li>
@@ -101,4 +211,4 @@ function BarNavigation() {
 }
 
 export default BarNavigation;
-//IO
+//IO