added new toast

app/Components/layout/BarNavigation/BarNavigation.css

@@ -1,11 +1,11 @@
 .barNavigation {
   text-align: center;
-  background-color: #003e79;
-  padding: 0 20px;
+  background-color: #ffffff;
   display: flex;
   width: 100%;
   top: 0;
-  min-height: 40px;
+  height: 45px;
+  max-height: 40px;
 }
 
 .barNavigation ul {
@@ -20,17 +20,13 @@
   cursor: pointer;
   color: white;
   width: 100%;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, border 0.3s ease;
   font-size: 1.5rem;
 }
 
 .barNavigation li:hover {
-  background-color: #bd8c01;
-}
-
-.barNavigation ul.active {
-  display: flex;
-  width: 100%;
+  background-color: #f9f9f9;
+  color: black;
 }
 
 .menuToggle {
@@ -46,7 +42,7 @@
 .menuToggle div {
   width: 25px;
   height: 3px;
-  background-color: white;
+  background-color: #7a7a7a;
   border-radius: 4px;
 }
 
@@ -105,8 +101,13 @@
   height: 100%;
   align-items: center;
   justify-content: center;
-  color: rgb(255, 255, 255);
-  font-size: 2rem;
+  color: #383838;
+  font-size: 1.5rem;
+}
+
+.subMenu:hover > span,
+.subMenu > a:hover > span {
+  color: black;
 }
 
 .containerLinks {
@@ -142,6 +143,13 @@ tbody {
     margin: 0;
   }
 
+  .barNavigation ul.active {
+    position: absolute;
+    left: 0;
+    display: flex;
+    width: 100%;
+  }
+
   .barNavigation {
     font-size: 15px;
     display: block;

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

@@ -1,15 +1,20 @@
 .logo {
   position: relative;
-  filter: invert(1);
   z-index: 3;
-  margin: 5px;
+}
+
+.center {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  width: 350px;
 }
 
 .cedetecContainer {
   position: absolute;
   top: 0;
   right: 0;
-  width: 300px;
+  width: 200px;
   height: 100%;
   z-index: -1;
 }
@@ -26,10 +31,10 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 65%;
-  height: 100%;
+  width: 100%;
+  height: 30px;
   min-width: 300px;
-  background: linear-gradient(to right, #bd8c01, #f9f9f9);
+  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }

app/Components/layout/Header/Header.tsx

@@ -1,8 +1,13 @@
+"use client";
 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";
 
 function Header() {
+  const pathname = usePathname();
+
   return (
     <header>
       <Link
@@ -14,18 +19,21 @@ function Header() {
           className={header.logo}
           src="/logo_fes.png"
           alt="Logo FES"
-          width={200}
-          height={50}
+          width={250}
+          height={70}
         />
       </Link>
       <div className={header.yellowPart}></div>
-      <div className={header.cedetecContainer}>
-        <Image
-          src="/cedetec.jpg"
-          alt="Image of CEDETEC"
-          width={300}
-          height={71}
-        />
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          maxHeight: "50%",
+          alignItems: "end",
+        }}
+        className=""
+      >
+        {pathname !== "/" && <BarNavigation />}
       </div>
     </header>
   );