added new style and fixed send token

app/Components/auth/Login/Login.tsx

@@ -33,9 +33,11 @@ function Login() {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
       const usuario = payload.usuario;
+      const role = payload.role;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       document.cookie = `user=${usuario}; path=/; SameSite=Strict`;
+      document.cookie = `role=${role}; path=/; SameSite=Strict`;
 
       toast.success("Inicio de sesión exitoso");
       router.push("/Impresiones");

app/Components/auth/Logout/Logout.css

@@ -16,7 +16,6 @@
     color: transparent;
     padding: 2rem;
     font-size: 0px;
-    top: 15px;
   }
 
   .button-logout::after {

app/Components/auth/Logout/Logout.tsx

@@ -10,6 +10,9 @@ export default function Logout() {
 
   const handleLogout = () => {
     Cookies.remove("token", { path: "/" });
+    Cookies.remove("role", { path: "/" });
+    Cookies.remove("user", { path: "/" });
+
     router.push("/");
   };
 

app/Components/layout/BarNavigation/BarNavigation.css

@@ -25,8 +25,8 @@
 }
 
 .barNavigation li:hover {
-  background-color: #f9f9f9;
-  color: black;
+  background-color: #f3f4f6;
+  color: black !important;
 }
 
 .menuToggle {
@@ -36,13 +36,12 @@
   gap: 4px;
   cursor: pointer;
   padding: 10px;
-  margin-right: 10px;
 }
 
 .menuToggle div {
   width: 25px;
   height: 3px;
-  background-color: #7a7a7a;
+  background-color: #000000;
   border-radius: 4px;
 }
 
@@ -79,7 +78,7 @@
 }
 
 .subMenu ul:hover {
-  color: #5b8cc9;
+  color: #101113;
 }
 
 .subMenu:hover ul {
@@ -103,6 +102,7 @@
   justify-content: center;
   color: #383838;
   font-size: 1.5rem;
+  padding: 1rem;
 }
 
 .subMenu:hover > span,
@@ -130,7 +130,7 @@ tbody {
   font-size: 1.25rem;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
   .menuToggle {
     display: flex;
     position: relative;
@@ -157,7 +157,7 @@ tbody {
 
   .barNavigation ul {
     position: absolute;
-    background-color: #003e79;
+    background-color: #fff;
     flex-direction: column;
     padding: 10px 0;
     align-items: center;
@@ -171,7 +171,6 @@ tbody {
   }
 
   .barNavigation li:hover {
-    background-color: #d59f0f;
     color: white;
     border-radius: 0;
     border: none;

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

@@ -1,20 +1,23 @@
 .logo {
   position: relative;
   z-index: 3;
+  object-fit: contain;
 }
 
-.center {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  width: 350px;
+.logoContainer {
+  position: relative;
+  width: 100%;
+  max-width: 250px;
+  min-width: 200px;
+  height: auto;
+  aspect-ratio: 250/70;
 }
 
 .cedetecContainer {
   position: absolute;
   top: 0;
   right: 0;
-  width: 200px;
+  width: 300px;
   height: 100%;
   z-index: -1;
 }
@@ -33,14 +36,80 @@
   left: -20px;
   width: 100%;
   height: 30px;
-  min-width: 300px;
   background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
 
+.header {
+  width: 100vw;
+  background-color: #fff;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0 10px;
+  position: relative;
+  z-index: 1;
+  align-items: end;
+}
+
+.header::after {
+  content: "";
+  top: 0;
+  left: -60px;
+  position: absolute;
+  background-color: #003e79;
+  height: 100%;
+  min-width: 350px;
+  transform: skew(45deg);
+  z-index: 2;
+}
+
+.header::before {
+  content: "";
+  top: 0;
+  left: -40px;
+  position: absolute;
+  background-color: rgb(1, 92, 184);
+  height: 100%;
+  width: 10%;
+  min-width: 350px;
+  transform: skew(45deg);
+  z-index: 2;
+}
+
+.containerBarNav {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-left: 110px;
+  max-height: 60%;
+  align-items: end;
+}
+
 @media (max-width: 800px) {
   .yellowPart {
+    left: 0;
     background: #bd8c01;
+    transform: skew(0deg);
+  }
+  .header::after {
+    left: -100px;
+  }
+  .header::before {
+    left: -80px;
+  }
+}
+
+@media (max-width: 400px) {
+  .header::after {
+    min-width: 100%;
+    transform: skew(25deg);
+  }
+  .header::before {
+    min-width: 100%;
+    transform: skew(25deg);
+  }
+  .containerBarNav {
+    padding-left: 0;
   }
 }

app/Components/layout/Header/Header.tsx

@@ -4,36 +4,45 @@ 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() {
-  const pathname = usePathname();
+  const [role, setRole] = useState("");
+
+  useEffect(() => {
+    const cookies = Object.fromEntries(
+      document.cookie.split("; ").map((c) => c.split("="))
+    );
+    setRole(cookies.role || "");
+  }, []);
 
   return (
-    <header>
+    <header className={header.header}>
       <Link
         href="https://www.unam.mx/"
         target="_blank"
         className={header.center}
-      >
-        <Image
-          className={header.logo}
-          src="/logo_fes.png"
-          alt="Logo FES"
-          width={250}
-          height={70}
-        />
-      </Link>
-      <div className={header.yellowPart}></div>
-      <div
         style={{
           display: "flex",
-          width: "100%",
-          maxHeight: "50%",
-          alignItems: "end",
+          alignItems: "center",
+          margin: "10px 5px",
         }}
-        className=""
       >
-        {pathname !== "/" && <BarNavigation />}
+        <div className={header.logoContainer}>
+          <Image
+            className={header.logo}
+            src="/logo_fes.png"
+            alt="Logo FES"
+            fill
+            style={{ objectFit: "contain" }}
+          />
+        </div>
+      </Link>
+      <div className={header.yellowPart}></div>
+      <div className={header.containerBarNav}>
+        {role === "ADMINISTRADOR" && <BarNavigation />}
+        {/*role === "operator" && <OperatorBarNavigation />*/}
+        {/*role === "social" && <SocialServiceBarNavigation />*/}
       </div>
     </header>
   );

app/globals.css

@@ -25,47 +25,13 @@ body {
   min-height: 100dvh;
   width: 100vw;
   overflow: hidden;
+  background-color: #f9f9f9;
 }
 
 main {
   position: relative;
 }
 
-header {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  padding: 0 20px;
-  position: relative;
-  z-index: 1;
-  height: 90px;
-  align-items: end;
-}
-
-header::after {
-  content: "";
-  top: 0;
-  left: -45px;
-  position: absolute;
-  background-color: #003e79;
-  height: 100%;
-  min-width: 350px;
-  transform: skew(45deg);
-  z-index: 2;
-}
-
-header::before {
-  content: "";
-  top: 0;
-  left: -25px;
-  position: absolute;
-  background-color: rgb(1, 92, 184);
-  height: 100%;
-  width: 10%;
-  min-width: 350px;
-  transform: skew(45deg);
-  z-index: 2;
-}
-
 footer {
   position: relative;
   display: flex;
@@ -90,7 +56,6 @@ footer p {
   justify-items: center;
   height: 100%;
   width: 100%;
-  background-color: #f9f9f9;
 }
 
 @keyframes fadeInUp {
@@ -571,9 +536,6 @@ table td:last-child {
 }
 
 @media (max-width: 800px) {
-  header {
-    padding: 6px 16px;
-  }
 
   .container {
     display: flex;

app/lib/getStudent.ts

@@ -1,11 +1,25 @@
 import axios from "axios";
 import { envConfig } from "./config";
-import apiClient from "./apiClient";
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+
+if (!envConfig.apiUrl) {
+  throw new Error("API URL is not defined in envConfig");
+}
 
 export async function GetStudent(numAcount: number) {
+  const cookieStore = cookies();
+  const token = (await cookieStore).get("token")?.value;
+
+  if (!token) redirect("/");
   try {
-    const response = await apiClient.get(
-      `/student/${numAcount}`
+    const response = await axios.get(
+      `${envConfig.apiUrl}/student/${numAcount}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
     );
 
     return response.data;