added new style and fixed send token

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>
   );