new next version, new style to barnavigation and no hardcode

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
+import { envConfig } from "@/app/lib/config";
 
 interface Alumno {
   id_cuenta: number;
@@ -22,6 +23,10 @@ interface AlumnoSancion {
   sancion: Sancion;
 }
 
+if (!envConfig.apiUrl) {
+  console.error("API URL is not defined in envConfig");
+}
+
 export default function TableSancion({ idCuenta }: { idCuenta: number }) {
   const [sanciones, setSanciones] = useState<Sancion[]>([]);
   const [alumno, setAlumno] = useState<Alumno | null>(null);
@@ -34,7 +39,7 @@ export default function TableSancion({ idCuenta }: { idCuenta: number }) {
     // Obtener sanciones del alumno
     axios
       .get(
-        `https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/${idCuenta}`
+        `${envConfig.apiUrl}/asignacionTiempo_test/alumno-sancion/${idCuenta}`
       )
       .then((res) => {
         setAlumno(res.data.student);
@@ -48,7 +53,7 @@ export default function TableSancion({ idCuenta }: { idCuenta: number }) {
 
     // Obtener catálogo de sanciones
     axios
-      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+      .get(`${envConfig.apiUrl}/asignacionTiempo_test/sancion`)
       .then((res) => setSanciones(res.data))
       .catch((err) =>
         toast.error("Error al obtener el catálogo de sanciones:", err)

app/Components/SelectAreas.tsx

@@ -1,6 +1,11 @@
 "use client";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import { envConfig } from "../lib/config";
+
+if (!envConfig.apiUrl) {
+  console.error("API URL is not defined in envConfig");
+}
 
 export default function SelectAreas() {
   const [areas, setAreas] = useState([]);
@@ -8,7 +13,7 @@ export default function SelectAreas() {
 
   useEffect(() => {
     axios
-      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion")
+      .get(`${envConfig.apiUrl}/asignacionTiempo_test/area-ubicacion`)
       .then((data) => {
         setAreas(data.data);
       })

app/Components/auth/Login/Login.tsx

@@ -47,7 +47,7 @@ function Login() {
   return (
     <section className="centerGrid containerSection">
       <form className="login" onSubmit={handleLogin}>
-        <h2 className="title">Inicio de sesión</h2>
+        <h2 className="title">Bienvenido a AT</h2>
 
         <div className="containerInput">
           <label className="label">Usuario</label>

app/Components/layout/BarNavigation/BarNavigation.css

@@ -13,6 +13,7 @@
   justify-content: space-around;
   width: 100%;
   gap: 10px;
+  transition: width 0.5 ease-in-out;
 }
 
 .barNavigation li {
@@ -95,6 +96,7 @@
 }
 
 .subMenu span {
+  font-weight: bold;
   display: flex;
   width: 100%;
   height: 100%;
@@ -113,6 +115,7 @@
 .containerLinks {
   padding: 0 !important;
   border-radius: 0 0 4px 4px;
+  top: 20px;
 }
 
 .links {
@@ -143,13 +146,6 @@ tbody {
     margin: 0;
   }
 
-  .barNavigation ul.active {
-    position: absolute;
-    left: 0;
-    display: flex;
-    width: 100%;
-  }
-
   .barNavigation {
     font-size: 15px;
     display: block;
@@ -157,13 +153,36 @@ tbody {
 
   .barNavigation ul {
     position: absolute;
+    top: 76px;
+    left: 0;
+    width: 100%;
     background-color: #fff;
     flex-direction: column;
-    padding: 10px 0;
     align-items: center;
-    display: none;
-    z-index: 1;
-    height: auto;
+    z-index: 10;
+
+    transform: translateY(-15px);
+    opacity: 0;
+
+    pointer-events: none;
+
+    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out,
+      visibility 0.35s ease-in-out;
+  }
+
+  .barNavigation ul.active {
+    position: absolute;
+    left: 0;
+    display: flex;
+    width: 100%;
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .containerLinks {
+    top: 20px;
   }
 
   .barNavigation {
@@ -177,14 +196,32 @@ tbody {
   }
 
   .subMenu ul {
-    width: 100%;
-    border-radius: 4px;
     position: relative;
+    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;
+  }
+
+  .subMenu.open ul {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .subMenu ul {
+    opacity: 0;
   }
 
   thead,
   tbody {
     font-size: 1rem;
   }
-}
+}

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -9,7 +9,7 @@ function BarNavigation() {
 
   const toggleMenu = () => setOpenMenu(!openMenu);
   const toggleSubMenu = (index: number) => {
-    if (typeof window !== "undefined" && window.innerWidth <= 800) {
+    if (typeof window !== "undefined" && window.innerWidth <= 1000) {
       setOpenSubMenu(openSubMenu === index ? null : index);
     }
   };

app/Components/layout/Header/Header.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 import header from "./Header.module.css";
 import Link from "next/link";
 import BarNavigation from "../BarNavigation/BarNavigation";
-import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
 function Header() {