Repository: AxaFrance/design-system
Pull request #910: feat(look&feel): implement burger menu and make header responsive
Author: login: JulienForestier
Labels: name: theme-client
description: Changes relatives to the client theme
Created: 2025-02-21T10:29:00Z | Merged: 2025-03-17T13:36:29Z

Ajout de la responsivité sur le header.
Création d'un composant burger menu utilisé pour le header seulement pour l'instant.
Utilisation des nouvelles maquettes et des composant existants.
Style non conforme sur les composant déja présent qui ont changé sur la nouvelle maquette, pas de surcouche, 
attente des changement a venir sur ces composants .


Diff:
diff --git a/apps/look-and-feel-stories-css/src/Header.stories.ts b/apps/look-and-feel-stories-css/src/Header.stories.ts
index 3452cb2c77..66009e9bf6 100644
--- a/apps/look-and-feel-stories-css/src/Header.stories.ts
+++ b/apps/look-and-feel-stories-css/src/Header.stories.ts
@@ -3,8 +3,10 @@ import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/PreviousLink/PreviousLink.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/IconBg/IconBg.scss";
+
 import type { Meta, StoryObj } from "@storybook/html";
-import { getButton, getNavBar, getPreviousLink, render } from "./HeaderRender";
+import { render } from "./HeaderRender";
 
 const meta: Meta = {
   title: "Components/Header",
@@ -17,57 +19,39 @@ const meta: Meta = {
 export default meta;
 
 export const Default: StoryObj = {
-  render: (args) => {
-    const header = document.createElement("header");
-    header.classList.add("af-header");
-
-    const container = document.createElement("div");
-    container.classList.add("af-header-container");
-
-    const leftItem = document.createElement("div");
-    leftItem.classList.add("af-header-left-item");
-
-    const imgLogo = document.createElement("img");
-    imgLogo.classList.add("af-logo");
-    imgLogo.setAttribute("src", args.logo);
-    imgLogo.setAttribute("alt", args.alt);
-
-    leftItem.append(imgLogo);
-    container.append(leftItem);
-    header.append(container);
-
-    return header;
-  },
+  render,
 };
 
 export const HeaderWithLinks: StoryObj = {
   name: "Header with links",
-  render: (args) => {
-    const header = document.createElement("header");
-    header.classList.add("af-header");
-
-    const container = document.createElement("div");
-    container.classList.add("af-header-container");
-
-    const leftItem = document.createElement("div");
-    leftItem.classList.add("af-header-left-item");
-
-    const imgLogo = document.createElement("img");
-    imgLogo.classList.add("af-logo");
-    imgLogo.setAttribute("src", args.logo);
-    imgLogo.setAttribute("alt", args.alt);
-
-    const navBar = getNavBar(args.links);
-
-    leftItem.append(imgLogo);
-    leftItem.append(navBar);
-    container.append(leftItem);
-    header.append(container);
-
-    return header;
-  },
+  render,
   args: {
-    links: ["MES CONTRATS", "MES AVANTAGES", "MES DOCUMENTS"],
+    links: [
+      {
+        icon: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6V4.5H15V6H6ZM6 9V7.5H15V9H6ZM11 20V16.925L16.525 11.425C16.675 11.275 16.8417 11.1667 17.025 11.1C17.2083 11.0333 17.3917 11 17.575 11C17.775 11 17.9667 11.0375 18.15 11.1125C18.3333 11.1875 18.5 11.3 18.65 11.45L19.575 12.375C19.725 12.525 19.8333 12.6917 19.9 12.875C19.9667 13.0583 20 13.2417 20 13.425C20 13.6083 19.9625 13.7958 19.8875 13.9875C19.8125 14.1792 19.7008 14.35 19.5523 14.5L14.075 20H11ZM17.575 14.4L18.5 13.425L17.575 12.5L16.625 13.45L17.575 14.4ZM2.625 20C1.89583 20 1.27604 19.7448 0.765625 19.2344C0.255208 18.724 0 18.1042 0 17.375V14H3V0H18V9.525C17.75 9.49167 17.4969 9.49141 17.2406 9.52423C16.9844 9.55704 16.7375 9.61563 16.5 9.7V1.5H4.5V14H11.8L9.5 16.3V20H2.625Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES CONTRATS",
+      },
+      {
+        icon: `
+        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.675 11.7L6.55 8.85L4.25 7H7.1L8 4.2L8.9 7H11.75L9.425 8.85L10.3 11.7L8 9.925L5.675 11.7ZM2 21V13.275C1.36667 12.575 0.875 11.775 0.525 10.875C0.175 9.975 0 9.01667 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 9.01667 15.825 9.975 15.475 10.875C15.125 11.775 14.6333 12.575 14 13.275V21L8 19L2 21ZM8 14C9.66667 14 11.0833 13.4167 12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES AVANTAGES",
+      },
+      {
+        icon: `
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 18C1.0875 18 0.734375 17.8531 0.440625 17.5594C0.146875 17.2656 0 16.9125 0 16.5V1.5C0 1.0875 0.146875 0.734375 0.440625 0.440625C0.734375 0.146875 1.0875 0 1.5 0H11.5L18 6.5V16.5C18 16.9125 17.8531 17.2656 17.5594 17.5594C17.2656 17.8531 16.9125 18 16.5 18H1.5ZM3.975 13.725H14.025V12.225H3.975V13.725ZM3.975 9.75H14.025V8.25H3.975V9.75ZM3.975 5.775H10.875V4.275H3.975V5.775Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES DOCUMENTS",
+      },
+    ],
   },
 };
 
@@ -75,75 +59,193 @@ export const HeaderWithLinksAndRightItem: StoryObj = {
   name: "Header with links and right item",
   render,
   args: {
-    links: ["MES CONTRATS", "MES AVANTAGES", "MES DOCUMENTS"],
+    links: [
+      {
+        icon: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6V4.5H15V6H6ZM6 9V7.5H15V9H6ZM11 20V16.925L16.525 11.425C16.675 11.275 16.8417 11.1667 17.025 11.1C17.2083 11.0333 17.3917 11 17.575 11C17.775 11 17.9667 11.0375 18.15 11.1125C18.3333 11.1875 18.5 11.3 18.65 11.45L19.575 12.375C19.725 12.525 19.8333 12.6917 19.9 12.875C19.9667 13.0583 20 13.2417 20 13.425C20 13.6083 19.9625 13.7958 19.8875 13.9875C19.8125 14.1792 19.7008 14.35 19.5523 14.5L14.075 20H11ZM17.575 14.4L18.5 13.425L17.575 12.5L16.625 13.45L17.575 14.4ZM2.625 20C1.89583 20 1.27604 19.7448 0.765625 19.2344C0.255208 18.724 0 18.1042 0 17.375V14H3V0H18V9.525C17.75 9.49167 17.4969 9.49141 17.2406 9.52423C16.9844 9.55704 16.7375 9.61563 16.5 9.7V1.5H4.5V14H11.8L9.5 16.3V20H2.625Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES CONTRATS",
+      },
+      {
+        icon: `
+        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.675 11.7L6.55 8.85L4.25 7H7.1L8 4.2L8.9 7H11.75L9.425 8.85L10.3 11.7L8 9.925L5.675 11.7ZM2 21V13.275C1.36667 12.575 0.875 11.775 0.525 10.875C0.175 9.975 0 9.01667 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 9.01667 15.825 9.975 15.475 10.875C15.125 11.775 14.6333 12.575 14 13.275V21L8 19L2 21ZM8 14C9.66667 14 11.0833 13.4167 12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES AVANTAGES",
+      },
+      {
+        icon: `
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 18C1.0875 18 0.734375 17.8531 0.440625 17.5594C0.146875 17.2656 0 16.9125 0 16.5V1.5C0 1.0875 0.146875 0.734375 0.440625 0.440625C0.734375 0.146875 1.0875 0 1.5 0H11.5L18 6.5V16.5C18 16.9125 17.8531 17.2656 17.5594 17.5594C17.2656 17.8531 16.9125 18 16.5 18H1.5ZM3.975 13.725H14.025V12.225H3.975V13.725ZM3.975 9.75H14.025V8.25H3.975V9.75ZM3.975 5.775H10.875V4.275H3.975V5.775Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES DOCUMENTS",
+      },
+    ],
+    rightItem: [
+      {
+        label: "Espace Banque",
+        icon: `
+          <svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.68939 18.1042C1.2355 18.1042 0.846957 17.9426 0.523763 17.6194C0.200568 17.2962 0.0389709 16.9076 0.0389709 16.4537V7.62415C0.0389709 7.16707 0.200568 6.77575 0.523763 6.45019C0.846957 6.12464 1.2355 5.96186 1.68939 5.96186H2.9121V4.22103C2.9121 3.07603 3.30911 2.10255 4.10314 1.30061C4.89703 0.498803 5.86244 0.0979004 6.99939 0.0979004C8.13633 0.0979004 9.10196 0.498803 9.89626 1.30061C10.6907 2.10255 11.0879 3.07603 11.0879 4.22103V5.96186H12.3106C12.7677 5.96186 13.159 6.12464 13.4846 6.45019C13.8102 6.77575 13.9729 7.16707 13.9729 7.62415V16.4537C13.9729 16.9076 13.8102 17.2962 13.4846 17.6194C13.159 17.9426 12.7677 18.1042 12.3106 18.1042H1.68939ZM7.00356 13.6431C7.44564 13.6431 7.82293 13.4901 8.13543 13.1842C8.44793 12.8782 8.60418 12.5103 8.60418 12.0806C8.60418 11.6639 8.44675 11.2855 8.13189 10.9452C7.81703 10.6049 7.43855 10.4348 6.99647 10.4348C6.55439 10.4348 6.1771 10.6049 5.8646 10.9452C5.5521 11.2855 5.39585 11.6674 5.39585 12.091C5.39585 12.5146 5.55328 12.8792 5.86814 13.1848C6.183 13.4903 6.56147 13.6431 7.00356 13.6431ZM4.56251 5.96186H9.43751V4.22373C9.43751 3.52984 9.20286 2.94575 8.73356 2.47144C8.26411 1.99714 7.688 1.75998 7.00522 1.75998C6.32244 1.75998 5.7446 1.99714 5.27168 2.47144C4.7989 2.94575 4.56251 3.52984 4.56251 4.22373V5.96186Z" fill="#00008F"/>
+          </svg>
+        `,
+        variant: "secondary",
+      },
+      {
+        label: "Mon Profil",
+        icon: `
+          <svg width="25" height="25" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_320_699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+            <rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
+            </mask>
+            <g mask="url(#mask0_320_699)">
+              <path d="M10.0007 10.4805C9.08398 10.4805 8.33398 10.1888 7.75065 9.60547C7.16732 9.02214 6.87565 8.27214 6.87565 7.35547C6.87565 6.4388 7.16732 5.6888 7.75065 5.10547C8.33398 4.52214 9.08398 4.23047 10.0007 4.23047C10.9173 4.23047 11.6673 4.52214 12.2507 5.10547C12.834 5.6888 13.1257 6.4388 13.1257 7.35547C13.1257 8.27214 12.834 9.02214 12.2507 9.60547C11.6673 10.1888 10.9173 10.4805 10.0007 10.4805ZM3.33398 17.168V15.2096C3.33398 14.6819 3.46593 14.2305 3.72982 13.8555C3.99371 13.4805 4.33398 13.1957 4.75065 13.0013C5.68121 12.5846 6.57357 12.2721 7.42773 12.0638C8.2819 11.8555 9.13954 11.7513 10.0007 11.7513C10.8618 11.7513 11.7159 11.8589 12.5632 12.0742C13.4104 12.2895 14.2993 12.5985 15.2298 13.0013C15.6604 13.1957 16.0076 13.4805 16.2715 13.8555C16.5354 14.2305 16.6673 14.6819 16.6673 15.2096V17.168H3.33398Z" fill="#00008F"/>
+            </g>
+          </svg>
+        `,
+        variant: "ghost",
+      },
+    ],
   },
 };
 
 export const HeaderWithLinksAndRightItemAndHomeLink: StoryObj = {
   name: "Header with links, profile button and Home link",
-  render: (args) => {
-    const headerContainer = document.createElement("div");
-    const header = document.createElement("header");
-    header.classList.add("af-header");
-
-    const container = document.createElement("div");
-    container.classList.add("af-header-container");
-
-    const leftItem = document.createElement("div");
-    leftItem.classList.add("af-header-left-item");
-
-    const imgLogo = document.createElement("img");
-    imgLogo.classList.add("af-logo");
-    imgLogo.setAttribute("src", args.logo);
-    imgLogo.setAttribute("alt", args.alt);
-
-    const navBar = getNavBar(args.links);
-
-    const rightItem = document.createElement("div");
-    rightItem.classList.add("af-header-right-item");
-
-    const profileButton = getButton(
-      "Mon Profil",
-      `
-      <svg width="25" height="25" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <mask id="mask0_320_699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
-        <rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
-        </mask>
-        <g mask="url(#mask0_320_699)">
-          <path d="M10.0007 10.4805C9.08398 10.4805 8.33398 10.1888 7.75065 9.60547C7.16732 9.02214 6.87565 8.27214 6.87565 7.35547C6.87565 6.4388 7.16732 5.6888 7.75065 5.10547C8.33398 4.52214 9.08398 4.23047 10.0007 4.23047C10.9173 4.23047 11.6673 4.52214 12.2507 5.10547C12.834 5.6888 13.1257 6.4388 13.1257 7.35547C13.1257 8.27214 12.834 9.02214 12.2507 9.60547C11.6673 10.1888 10.9173 10.4805 10.0007 10.4805ZM3.33398 17.168V15.2096C3.33398 14.6819 3.46593 14.2305 3.72982 13.8555C3.99371 13.4805 4.33398 13.1957 4.75065 13.0013C5.68121 12.5846 6.57357 12.2721 7.42773 12.0638C8.2819 11.8555 9.13954 11.7513 10.0007 11.7513C10.8618 11.7513 11.7159 11.8589 12.5632 12.0742C13.4104 12.2895 14.2993 12.5985 15.2298 13.0013C15.6604 13.1957 16.0076 13.4805 16.2715 13.8555C16.5354 14.2305 16.6673 14.6819 16.6673 15.2096V17.168H3.33398Z" fill="#00008F"/>
-        </g>
-      </svg>
+  render,
+  args: {
+    links: [
+      {
+        icon: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6V4.5H15V6H6ZM6 9V7.5H15V9H6ZM11 20V16.925L16.525 11.425C16.675 11.275 16.8417 11.1667 17.025 11.1C17.2083 11.0333 17.3917 11 17.575 11C17.775 11 17.9667 11.0375 18.15 11.1125C18.3333 11.1875 18.5 11.3 18.65 11.45L19.575 12.375C19.725 12.525 19.8333 12.6917 19.9 12.875C19.9667 13.0583 20 13.2417 20 13.425C20 13.6083 19.9625 13.7958 19.8875 13.9875C19.8125 14.1792 19.7008 14.35 19.5523 14.5L14.075 20H11ZM17.575 14.4L18.5 13.425L17.575 12.5L16.625 13.45L17.575 14.4ZM2.625 20C1.89583 20 1.27604 19.7448 0.765625 19.2344C0.255208 18.724 0 18.1042 0 17.375V14H3V0H18V9.525C17.75 9.49167 17.4969 9.49141 17.2406 9.52423C16.9844 9.55704 16.7375 9.61563 16.5 9.7V1.5H4.5V14H11.8L9.5 16.3V20H2.625Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES CONTRATS",
+      },
+      {
+        icon: `
+        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.675 11.7L6.55 8.85L4.25 7H7.1L8 4.2L8.9 7H11.75L9.425 8.85L10.3 11.7L8 9.925L5.675 11.7ZM2 21V13.275C1.36667 12.575 0.875 11.775 0.525 10.875C0.175 9.975 0 9.01667 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 9.01667 15.825 9.975 15.475 10.875C15.125 11.775 14.6333 12.575 14 13.275V21L8 19L2 21ZM8 14C9.66667 14 11.0833 13.4167 12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES AVANTAGES",
+      },
+      {
+        icon: `
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 18C1.0875 18 0.734375 17.8531 0.440625 17.5594C0.146875 17.2656 0 16.9125 0 16.5V1.5C0 1.0875 0.146875 0.734375 0.440625 0.440625C0.734375 0.146875 1.0875 0 1.5 0H11.5L18 6.5V16.5C18 16.9125 17.8531 17.2656 17.5594 17.5594C17.2656 17.8531 16.9125 18 16.5 18H1.5ZM3.975 13.725H14.025V12.225H3.975V13.725ZM3.975 9.75H14.025V8.25H3.975V9.75ZM3.975 5.775H10.875V4.275H3.975V5.775Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES DOCUMENTS",
+      },
+    ],
+    previousLink: `
+          <a class="af-btn-client af-btn-client--ghost af-btn-client--header-previous-link" href="#">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3.19123 7.82522L8.16936 12.8036L6.99998 13.9611L0.0389404 7.00002L6.99998 0.0270996L8.16936 1.19647L3.19123 6.17481H13.9729V7.82522H3.19123Z" fill="#5F5F5F"/>
+            </svg>
+            Retour à l'accueil
+          </a>
       `,
-      undefined,
-      "ghost",
-    );
-    const banckingSpaceButton = getButton(
-      "Espace Banque",
-      `
+    rightItem: [
+      {
+        label: "Espace Banque",
+        icon: `
           <svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M1.68939 18.1042C1.2355 18.1042 0.846957 17.9426 0.523763 17.6194C0.200568 17.2962 0.0389709 16.9076 0.0389709 16.4537V7.62415C0.0389709 7.16707 0.200568 6.77575 0.523763 6.45019C0.846957 6.12464 1.2355 5.96186 1.68939 5.96186H2.9121V4.22103C2.9121 3.07603 3.30911 2.10255 4.10314 1.30061C4.89703 0.498803 5.86244 0.0979004 6.99939 0.0979004C8.13633 0.0979004 9.10196 0.498803 9.89626 1.30061C10.6907 2.10255 11.0879 3.07603 11.0879 4.22103V5.96186H12.3106C12.7677 5.96186 13.159 6.12464 13.4846 6.45019C13.8102 6.77575 13.9729 7.16707 13.9729 7.62415V16.4537C13.9729 16.9076 13.8102 17.2962 13.4846 17.6194C13.159 17.9426 12.7677 18.1042 12.3106 18.1042H1.68939ZM7.00356 13.6431C7.44564 13.6431 7.82293 13.4901 8.13543 13.1842C8.44793 12.8782 8.60418 12.5103 8.60418 12.0806C8.60418 11.6639 8.44675 11.2855 8.13189 10.9452C7.81703 10.6049 7.43855 10.4348 6.99647 10.4348C6.55439 10.4348 6.1771 10.6049 5.8646 10.9452C5.5521 11.2855 5.39585 11.6674 5.39585 12.091C5.39585 12.5146 5.55328 12.8792 5.86814 13.1848C6.183 13.4903 6.56147 13.6431 7.00356 13.6431ZM4.56251 5.96186H9.43751V4.22373C9.43751 3.52984 9.20286 2.94575 8.73356 2.47144C8.26411 1.99714 7.688 1.75998 7.00522 1.75998C6.32244 1.75998 5.7446 1.99714 5.27168 2.47144C4.7989 2.94575 4.56251 3.52984 4.56251 4.22373V5.96186Z" fill="#00008F"/>
           </svg>
         `,
-      undefined,
-      "secondary",
-    );
-
-    const previousLink = getPreviousLink();
-
-    leftItem.append(imgLogo);
-    leftItem.append(navBar);
-    rightItem.append(banckingSpaceButton);
-    rightItem.append(profileButton);
-    container.append(leftItem);
-    container.append(rightItem);
-    header.append(container);
-
-    headerContainer.append(header);
-    headerContainer.append(previousLink);
-
-    return headerContainer;
+        variant: "secondary",
+      },
+      {
+        label: "Mon Profil",
+        icon: `
+          <svg width="25" height="25" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_320_699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+            <rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
+            </mask>
+            <g mask="url(#mask0_320_699)">
+              <path d="M10.0007 10.4805C9.08398 10.4805 8.33398 10.1888 7.75065 9.60547C7.16732 9.02214 6.87565 8.27214 6.87565 7.35547C6.87565 6.4388 7.16732 5.6888 7.75065 5.10547C8.33398 4.52214 9.08398 4.23047 10.0007 4.23047C10.9173 4.23047 11.6673 4.52214 12.2507 5.10547C12.834 5.6888 13.1257 6.4388 13.1257 7.35547C13.1257 8.27214 12.834 9.02214 12.2507 9.60547C11.6673 10.1888 10.9173 10.4805 10.0007 10.4805ZM3.33398 17.168V15.2096C3.33398 14.6819 3.46593 14.2305 3.72982 13.8555C3.99371 13.4805 4.33398 13.1957 4.75065 13.0013C5.68121 12.5846 6.57357 12.2721 7.42773 12.0638C8.2819 11.8555 9.13954 11.7513 10.0007 11.7513C10.8618 11.7513 11.7159 11.8589 12.5632 12.0742C13.4104 12.2895 14.2993 12.5985 15.2298 13.0013C15.6604 13.1957 16.0076 13.4805 16.2715 13.8555C16.5354 14.2305 16.6673 14.6819 16.6673 15.2096V17.168H3.33398Z" fill="#00008F"/>
+            </g>
+          </svg>
+        `,
+        variant: "ghost",
+      },
+    ],
   },
+};
+
+export const HeaderWithBurgerMenuOpened: StoryObj = {
+  name: "Header with burger menu opened",
+  render,
   args: {
-    links: ["MES CONTRATS", "MES AVANTAGES", "MES DOCUMENTS"],
+    isBurgerMenuOpened: true,
+    links: [
+      {
+        href: "/mes-contrats",
+        icon: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6V4.5H15V6H6ZM6 9V7.5H15V9H6ZM11 20V16.925L16.525 11.425C16.675 11.275 16.8417 11.1667 17.025 11.1C17.2083 11.0333 17.3917 11 17.575 11C17.775 11 17.9667 11.0375 18.15 11.1125C18.3333 11.1875 18.5 11.3 18.65 11.45L19.575 12.375C19.725 12.525 19.8333 12.6917 19.9 12.875C19.9667 13.0583 20 13.2417 20 13.425C20 13.6083 19.9625 13.7958 19.8875 13.9875C19.8125 14.1792 19.7008 14.35 19.5523 14.5L14.075 20H11ZM17.575 14.4L18.5 13.425L17.575 12.5L16.625 13.45L17.575 14.4ZM2.625 20C1.89583 20 1.27604 19.7448 0.765625 19.2344C0.255208 18.724 0 18.1042 0 17.375V14H3V0H18V9.525C17.75 9.49167 17.4969 9.49141 17.2406 9.52423C16.9844 9.55704 16.7375 9.61563 16.5 9.7V1.5H4.5V14H11.8L9.5 16.3V20H2.625Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES CONTRATS",
+        isActive: true,
+      },
+      {
+        href: "/mes-avantages",
+        icon: `
+        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.675 11.7L6.55 8.85L4.25 7H7.1L8 4.2L8.9 7H11.75L9.425 8.85L10.3 11.7L8 9.925L5.675 11.7ZM2 21V13.275C1.36667 12.575 0.875 11.775 0.525 10.875C0.175 9.975 0 9.01667 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 9.01667 15.825 9.975 15.475 10.875C15.125 11.775 14.6333 12.575 14 13.275V21L8 19L2 21ZM8 14C9.66667 14 11.0833 13.4167 12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES AVANTAGES",
+      },
+      {
+        href: "/mes-documents",
+        icon: `
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 18C1.0875 18 0.734375 17.8531 0.440625 17.5594C0.146875 17.2656 0 16.9125 0 16.5V1.5C0 1.0875 0.146875 0.734375 0.440625 0.440625C0.734375 0.146875 1.0875 0 1.5 0H11.5L18 6.5V16.5C18 16.9125 17.8531 17.2656 17.5594 17.5594C17.2656 17.8531 16.9125 18 16.5 18H1.5ZM3.975 13.725H14.025V12.225H3.975V13.725ZM3.975 9.75H14.025V8.25H3.975V9.75ZM3.975 5.775H10.875V4.275H3.975V5.775Z" fill="#00008F"/>
+        </svg>
+        `,
+        label: "MES DOCUMENTS",
+      },
+    ],
+    previousLink: `
+          <a class="af-btn-client af-btn-client--ghost af-btn-client--header-previous-link" href="#">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3.19123 7.82522L8.16936 12.8036L6.99998 13.9611L0.0389404 7.00002L6.99998 0.0270996L8.16936 1.19647L3.19123 6.17481H13.9729V7.82522H3.19123Z" fill="#5F5F5F"/>
+            </svg>
+            Retour à l'accueil
+          </a>
+      `,
+    rightItem: [
+      {
+        label: "Espace Banque",
+        icon: `
+          <svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.68939 18.1042C1.2355 18.1042 0.846957 17.9426 0.523763 17.6194C0.200568 17.2962 0.0389709 16.9076 0.0389709 16.4537V7.62415C0.0389709 7.16707 0.200568 6.77575 0.523763 6.45019C0.846957 6.12464 1.2355 5.96186 1.68939 5.96186H2.9121V4.22103C2.9121 3.07603 3.30911 2.10255 4.10314 1.30061C4.89703 0.498803 5.86244 0.0979004 6.99939 0.0979004C8.13633 0.0979004 9.10196 0.498803 9.89626 1.30061C10.6907 2.10255 11.0879 3.07603 11.0879 4.22103V5.96186H12.3106C12.7677 5.96186 13.159 6.12464 13.4846 6.45019C13.8102 6.77575 13.9729 7.16707 13.9729 7.62415V16.4537C13.9729 16.9076 13.8102 17.2962 13.4846 17.6194C13.159 17.9426 12.7677 18.1042 12.3106 18.1042H1.68939ZM7.00356 13.6431C7.44564 13.6431 7.82293 13.4901 8.13543 13.1842C8.44793 12.8782 8.60418 12.5103 8.60418 12.0806C8.60418 11.6639 8.44675 11.2855 8.13189 10.9452C7.81703 10.6049 7.43855 10.4348 6.99647 10.4348C6.55439 10.4348 6.1771 10.6049 5.8646 10.9452C5.5521 11.2855 5.39585 11.6674 5.39585 12.091C5.39585 12.5146 5.55328 12.8792 5.86814 13.1848C6.183 13.4903 6.56147 13.6431 7.00356 13.6431ZM4.56251 5.96186H9.43751V4.22373C9.43751 3.52984 9.20286 2.94575 8.73356 2.47144C8.26411 1.99714 7.688 1.75998 7.00522 1.75998C6.32244 1.75998 5.7446 1.99714 5.27168 2.47144C4.7989 2.94575 4.56251 3.52984 4.56251 4.22373V5.96186Z" fill="#00008F"/>
+          </svg>
+        `,
+        variant: "secondary",
+      },
+      {
+        label: "Mon Profil",
+        icon: `
+          <svg width="25" height="25" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_320_699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+            <rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
+            </mask>
+            <g mask="url(#mask0_320_699)">
+              <path d="M10.0007 10.4805C9.08398 10.4805 8.33398 10.1888 7.75065 9.60547C7.16732 9.02214 6.87565 8.27214 6.87565 7.35547C6.87565 6.4388 7.16732 5.6888 7.75065 5.10547C8.33398 4.52214 9.08398 4.23047 10.0007 4.23047C10.9173 4.23047 11.6673 4.52214 12.2507 5.10547C12.834 5.6888 13.1257 6.4388 13.1257 7.35547C13.1257 8.27214 12.834 9.02214 12.2507 9.60547C11.6673 10.1888 10.9173 10.4805 10.0007 10.4805ZM3.33398 17.168V15.2096C3.33398 14.6819 3.46593 14.2305 3.72982 13.8555C3.99371 13.4805 4.33398 13.1957 4.75065 13.0013C5.68121 12.5846 6.57357 12.2721 7.42773 12.0638C8.2819 11.8555 9.13954 11.7513 10.0007 11.7513C10.8618 11.7513 11.7159 11.8589 12.5632 12.0742C13.4104 12.2895 14.2993 12.5985 15.2298 13.0013C15.6604 13.1957 16.0076 13.4805 16.2715 13.8555C16.5354 14.2305 16.6673 14.6819 16.6673 15.2096V17.168H3.33398Z" fill="#00008F"/>
+            </g>
+          </svg>
+        `,
+        variant: "ghost",
+      },
+    ],
   },
 };
diff --git a/apps/look-and-feel-stories-css/src/HeaderRender.ts b/apps/look-and-feel-stories-css/src/HeaderRender.ts
index 4dc962eb5b..1a64f350ec 100644
--- a/apps/look-and-feel-stories-css/src/HeaderRender.ts
+++ b/apps/look-and-feel-stories-css/src/HeaderRender.ts
@@ -1,19 +1,42 @@
 import type { Args } from "@storybook/html";
 
-export const getButton = (
-  label: string,
-  iconLeft?: string,
-  iconRight?: string,
-  variant?: "ghost" | "secondary",
-) => {
+const getAnchor = ({
+  href,
+  icon,
+  label,
+  isActive = false,
+}: {
+  href: string;
+  icon: string;
+  label: string;
+  isActive: boolean;
+}) => {
+  const anchor = document.createElement("a");
+  anchor.role = "menuitem";
+  anchor.className = "af-navbar-item__link";
+
+  anchor.className = [
+    "af-navbar-item__link",
+    isActive ? `af-navbar-item__link--active` : "",
+  ].join(" ");
+
+  anchor.href = href;
+  anchor.innerHTML = `${icon}${label}`;
+
+  return anchor;
+};
+
+export const getButton = ({
+  label,
+  icon,
+  variant,
+}: {
+  label: string;
+  icon?: string;
+  variant?: "ghost" | "secondary";
+}) => {
   const btn = document.createElement("button");
-  btn.innerHTML = label;
-  if (iconLeft) {
-    btn.innerHTML = `${iconLeft}${btn.innerHTML}`;
-  }
-  if (iconRight) {
-    btn.innerHTML = `${btn.innerHTML}${iconRight}`;
-  }
+  btn.innerHTML = `${icon}${label}`;
 
   btn.className = [
     "af-btn-client",
@@ -23,31 +46,96 @@ export const getButton = (
   return btn;
 };
 
-export const getPreviousLink = () => {
-  const container = document.createElement("div");
-  container.className = "af-header-previous-link-container";
-  container.innerHTML = `
-          <a class="af-btn-client af-btn-client--ghost af-btn-client--header-previous-link" href="#">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3.19123 7.82522L8.16936 12.8036L6.99998 13.9611L0.0389404 7.00002L6.99998 0.0270996L8.16936 1.19647L3.19123 6.17481H13.9729V7.82522H3.19123Z" fill="#5F5F5F"/>
-            </svg>
-            Retour à l'accueil
-          </a>
-      `;
-
-  return container;
+export const getClickItem = (children: string) => {
+  const item = document.createElement("li");
+  item.role = "none";
+  item.className = "af-list__item";
+
+  const anchor = document.createElement("a");
+  anchor.role = "menuitem";
+  anchor.className = ["af-click-item", "af-click-item--small"].join(" ");
+
+  const content = document.createElement("div");
+  content.className = "af-click-item__content";
+
+  const label = document.createElement("div");
+  label.className = "af-click-item__label";
+
+  label.innerHTML = children;
+
+  content.append(label);
+
+  const action = document.createElement("div");
+  action.className = "af-click-item__action";
+  action.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+    </svg>
+  `;
+
+  anchor.append(content);
+  anchor.append(action);
+
+  item.append(anchor);
+
+  return item;
+};
+
+export const getBurgerMenu = (
+  links: { href: string; icon: string; label: string }[],
+  rightItem: {
+    label: string;
+    icon?: string;
+  },
+) => {
+  const navBar = document.createElement("nav");
+  navBar.role = "navigation";
+  navBar.className = [
+    "af-card",
+    "af-card--list",
+    "af-burger-menu",
+    "open",
+  ].join(" ");
+
+  const list = document.createElement("ul");
+  list.role = "menubar";
+
+  if (links) {
+    links.forEach(({ icon, label }: { icon: string; label: string }) =>
+      list.append(getClickItem(`${icon}${label}`)),
+    );
+  }
+
+  if (rightItem) {
+    if (Array.isArray(rightItem)) {
+      rightItem.forEach((item) =>
+        list.append(getClickItem(`${item.icon}${item.label}`)),
+      );
+    } else {
+      list.append(getClickItem(`${rightItem.icon}${rightItem.label}`));
+    }
+  }
+
+  navBar.append(list);
+
+  return navBar;
 };
 
-export const getNavBar = (args: Args) => {
+const getNavBar = (anchors: HTMLAnchorElement[]) => {
   const navBar = document.createElement("nav");
+  navBar.role = "navigation";
   const list = document.createElement("ul");
   list.className = "af-navbar-container";
   list.role = "menubar";
-  list.innerHTML = `
-          <li class="af-navbar-item" role="none"><a class="af-navbar-item__link af-navbar-item__link--active" role="menuitem" href="/mes-contrats">${args[0]}</a></li>
-          <li class="af-navbar-item" role="none"><a class="af-navbar-item__link"  role="menuitem" href="/mes-avantages">${args[1]}</a></li>
-          <li class="af-navbar-item" role="none"><a class="af-navbar-item__link" role="menuitem" href="/mes-documents">${args[2]}</a></li>
-      `;
+
+  anchors.forEach((anchor) => {
+    const item = document.createElement("li");
+    item.role = "none";
+
+    item.append(anchor);
+
+    list.append(item);
+  });
 
   navBar.append(list);
 
@@ -55,58 +143,93 @@ export const getNavBar = (args: Args) => {
 };
 
 export const render = (args: Args) => {
+  const headerWrapper = document.createElement("div");
   const header = document.createElement("header");
-  header.classList.add("af-header");
+  header.className = "af-header";
 
   const container = document.createElement("div");
-  container.classList.add("af-header-container");
+  container.className = "af-header-container";
 
   const leftItem = document.createElement("div");
-  leftItem.classList.add("af-header-left-item");
+  leftItem.className = "af-header-left-item";
 
   const imgLogo = document.createElement("img");
-  imgLogo.classList.add("af-logo");
+  imgLogo.className = "af-logo";
   imgLogo.setAttribute("src", args.logo);
   imgLogo.setAttribute("alt", args.alt);
+  leftItem.append(imgLogo);
 
-  const navBar = getNavBar(args.links);
-
-  const rightItem = document.createElement("div");
-  rightItem.classList.add("af-header-right-item");
-
-  const profileButton = getButton(
-    "Mon Profil",
-    `
-          <svg width="25" height="25" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <mask id="mask0_320_699" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
-            <rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
-            </mask>
-            <g mask="url(#mask0_320_699)">
-              <path d="M10.0007 10.4805C9.08398 10.4805 8.33398 10.1888 7.75065 9.60547C7.16732 9.02214 6.87565 8.27214 6.87565 7.35547C6.87565 6.4388 7.16732 5.6888 7.75065 5.10547C8.33398 4.52214 9.08398 4.23047 10.0007 4.23047C10.9173 4.23047 11.6673 4.52214 12.2507 5.10547C12.834 5.6888 13.1257 6.4388 13.1257 7.35547C13.1257 8.27214 12.834 9.02214 12.2507 9.60547C11.6673 10.1888 10.9173 10.4805 10.0007 10.4805ZM3.33398 17.168V15.2096C3.33398 14.6819 3.46593 14.2305 3.72982 13.8555C3.99371 13.4805 4.33398 13.1957 4.75065 13.0013C5.68121 12.5846 6.57357 12.2721 7.42773 12.0638C8.2819 11.8555 9.13954 11.7513 10.0007 11.7513C10.8618 11.7513 11.7159 11.8589 12.5632 12.0742C13.4104 12.2895 14.2993 12.5985 15.2298 13.0013C15.6604 13.1957 16.0076 13.4805 16.2715 13.8555C16.5354 14.2305 16.6673 14.6819 16.6673 15.2096V17.168H3.33398Z" fill="#00008F"/>
-            </g>
-          </svg>
-        `,
-    undefined,
-    "ghost",
-  );
-  const banckingSpaceButton = getButton(
-    "Espace Banque",
-    `
-          <svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1.68939 18.1042C1.2355 18.1042 0.846957 17.9426 0.523763 17.6194C0.200568 17.2962 0.0389709 16.9076 0.0389709 16.4537V7.62415C0.0389709 7.16707 0.200568 6.77575 0.523763 6.45019C0.846957 6.12464 1.2355 5.96186 1.68939 5.96186H2.9121V4.22103C2.9121 3.07603 3.30911 2.10255 4.10314 1.30061C4.89703 0.498803 5.86244 0.0979004 6.99939 0.0979004C8.13633 0.0979004 9.10196 0.498803 9.89626 1.30061C10.6907 2.10255 11.0879 3.07603 11.0879 4.22103V5.96186H12.3106C12.7677 5.96186 13.159 6.12464 13.4846 6.45019C13.8102 6.77575 13.9729 7.16707 13.9729 7.62415V16.4537C13.9729 16.9076 13.8102 17.2962 13.4846 17.6194C13.159 17.9426 12.7677 18.1042 12.3106 18.1042H1.68939ZM7.00356 13.6431C7.44564 13.6431 7.82293 13.4901 8.13543 13.1842C8.44793 12.8782 8.60418 12.5103 8.60418 12.0806C8.60418 11.6639 8.44675 11.2855 8.13189 10.9452C7.81703 10.6049 7.43855 10.4348 6.99647 10.4348C6.55439 10.4348 6.1771 10.6049 5.8646 10.9452C5.5521 11.2855 5.39585 11.6674 5.39585 12.091C5.39585 12.5146 5.55328 12.8792 5.86814 13.1848C6.183 13.4903 6.56147 13.6431 7.00356 13.6431ZM4.56251 5.96186H9.43751V4.22373C9.43751 3.52984 9.20286 2.94575 8.73356 2.47144C8.26411 1.99714 7.688 1.75998 7.00522 1.75998C6.32244 1.75998 5.7446 1.99714 5.27168 2.47144C4.7989 2.94575 4.56251 3.52984 4.56251 4.22373V5.96186Z" fill="#00008F"/>
-          </svg>
-        `,
-    undefined,
-    "secondary",
-  );
+  if (args.links) {
+    const navBar = getNavBar(
+      args.links.map(
+        (link: {
+          href: string;
+          icon: string;
+          label: string;
+          isActive: boolean;
+        }) => getAnchor({ ...link }),
+      ),
+    );
+    leftItem.append(navBar);
+  }
 
-  leftItem.append(imgLogo);
-  leftItem.append(navBar);
-  rightItem.append(banckingSpaceButton);
-  rightItem.append(profileButton);
   container.append(leftItem);
-  container.append(rightItem);
+
+  if (args.rightItem) {
+    const rightItem = document.createElement("div");
+    rightItem.className = "af-header-right-item";
+
+    if (Array.isArray(args.rightItem)) {
+      args.rightItem.forEach((item) =>
+        rightItem.append(getButton({ ...item })),
+      );
+    } else {
+      rightItem.append(args.rightItem);
+    }
+
+    container.append(rightItem);
+  }
+
+  if (args.links || args.rightItem) {
+    const burgerMenuButton = document.createElement("button");
+    burgerMenuButton.className = ["af-btn-client", "af-btn-client--ghost"].join(
+      " ",
+    );
+
+    burgerMenuButton.innerHTML = `
+      <div class="af-icon-bg">
+        <svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0.528961 17.697V15.0376H25.49V17.697H0.528961ZM0.528961 10.3203V7.67965H25.49V10.3203H0.528961ZM0.528961 2.96231V0.302979H25.49V2.96231H0.528961Z" fill="#00008F"/>
+        </svg>
+      </div>
+    `;
+
+    container.append(burgerMenuButton);
+  }
+
   header.append(container);
 
-  return header;
+  if (args.isBurgerMenuOpened) {
+    header.append(getBurgerMenu(args.links, args.rightItem));
+  }
+
+  headerWrapper.append(header);
+
+  if (args.previousLink) {
+    const previousLinkContainer = document.createElement("div");
+    previousLinkContainer.className = "af-header-previous-link-container";
+    previousLinkContainer.innerHTML = args.previousLink;
+
+    headerWrapper.append(previousLinkContainer);
+  }
+
+  const overlay = document.createElement("div");
+  overlay.className = [
+    "af-header-overlay",
+    `${args.isBurgerMenuOpened ? "open" : ""}`,
+  ].join(" ");
+
+  headerWrapper.append(overlay);
+
+  return headerWrapper;
 };
diff --git a/apps/look-and-feel-stories/src/Header.stories.tsx b/apps/look-and-feel-stories/src/Header.stories.tsx
index 3f4180eb10..77572da8ee 100644
--- a/apps/look-and-feel-stories/src/Header.stories.tsx
+++ b/apps/look-and-feel-stories/src/Header.stories.tsx
@@ -1,4 +1,7 @@
 import { Button, Header, Svg } from "@axa-fr/design-system-look-and-feel-react";
+import contractEdit from "@material-symbols/svg-400/outlined/contract_edit.svg";
+import workspacePremium from "@material-symbols/svg-400/outlined/workspace_premium.svg";
+import textSnippet from "@material-symbols/svg-400/outlined/text_snippet-fill.svg";
 import lock from "@material-symbols/svg-400/outlined/lock-fill.svg";
 import person from "@material-symbols/svg-400/outlined/person-fill.svg";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -21,28 +24,16 @@ export const HeaderWithNavBar: StoryObj<typeof Header> = {
   name: "Header with navigation bar",
   render: () => (
     <Header>
-      <a
-        key="MES CONTRATS link"
-        className="af-navbar-item__link"
-        href="/mes-contrats"
-        target="_"
-      >
+      <a key="MES CONTRATS link" href="/mes-contrats" target="_">
+        <Svg src={contractEdit} aria-hidden />
         MES CONTRATS
       </a>
-      <a
-        key="MES AVANTAGES link"
-        className="af-navbar-item__link"
-        href="/mes-avantages"
-        target="_"
-      >
+      <a key="MES AVANTAGES link" href="/mes-avantages" target="_">
+        <Svg src={workspacePremium} aria-hidden />
         MES AVANTAGES
       </a>
-      <a
-        key="MES DOCUMENTS link"
-        className="af-navbar-item__link"
-        href="/mes-documents"
-        target="_"
-      >
+      <a key="MES DOCUMENTS link" href="/mes-documents" target="_">
+        <Svg src={textSnippet} aria-hidden />
         MES DOCUMENTS
       </a>
     </Header>
@@ -53,25 +44,16 @@ export const HeaderWithNavBarAndRightItem: StoryObj<typeof Header> = {
   name: "Header with navigation bar and right item",
   render: ({ rightItem }) => (
     <Header rightItem={rightItem}>
-      <a
-        key="MES CONTRATS link"
-        className="af-navbar-item__link"
-        href="/mes-contrats"
-      >
+      <a key="MES CONTRATS link" href="/mes-contrats" target="_">
+        <Svg src={contractEdit} aria-hidden />
         MES CONTRATS
       </a>
-      <a
-        key="MES AVANTAGES link"
-        className="af-navbar-item__link"
-        href="/mes-avantages"
-      >
+      <a key="MES AVANTAGES link" href="/mes-avantages" target="_">
+        <Svg src={workspacePremium} aria-hidden />
         MES AVANTAGES
       </a>
-      <a
-        key="MES DOCUMENTS link"
-        className="af-navbar-item__link"
-        href="/mes-documents"
-      >
+      <a key="MES DOCUMENTS link" href="/mes-documents" target="_">
+        <Svg src={textSnippet} aria-hidden />
         MES DOCUMENTS
       </a>
     </Header>
@@ -102,25 +84,16 @@ export const HeaderWithLinksAndRightItemAndPreviousLink: StoryObj<
   name: "Header with links, right item and Previous link",
   render: ({ previousLink, rightItem }) => (
     <Header previousLink={previousLink} rightItem={rightItem}>
-      <a
-        key="MES CONTRATS link"
-        className="af-navbar-item__link"
-        href="/mes-contrats"
-      >
+      <a key="MES CONTRATS link" href="/mes-contrats" target="_">
+        <Svg src={contractEdit} aria-hidden />
         MES CONTRATS
       </a>
-      <a
-        key="MES AVANTAGES link"
-        className="af-navbar-item__link"
-        href="/mes-avantages"
-      >
+      <a key="MES AVANTAGES link" href="/mes-avantages" target="_">
+        <Svg src={workspacePremium} aria-hidden />
         MES AVANTAGES
       </a>
-      <a
-        key="MES DOCUMENTS link"
-        className="af-navbar-item__link"
-        href="/mes-documents"
-      >
+      <a key="MES DOCUMENTS link" href="/mes-documents" target="_">
+        <Svg src={textSnippet} aria-hidden />
         MES DOCUMENTS
       </a>
     </Header>
@@ -160,25 +133,16 @@ export const HeaderWithLinksAndRightItemAndPreviousLinkAndActiveLink: StoryObj<
       previousLink={previousLink}
       rightItem={rightItem}
     >
-      <a
-        key="MES CONTRATS link"
-        className="af-navbar-item__link"
-        href="/mes-contrats"
-      >
+      <a key="MES CONTRATS link" href="/mes-contrats" target="_">
+        <Svg src={contractEdit} aria-hidden />
         MES CONTRATS
       </a>
-      <a
-        key="MES AVANTAGES link"
-        className="af-navbar-item__link"
-        href="/mes-avantages"
-      >
+      <a key="MES AVANTAGES link" href="/mes-avantages" target="_">
+        <Svg src={workspacePremium} aria-hidden />
         MES AVANTAGES
       </a>
-      <a
-        key="MES DOCUMENTS link"
-        className="af-navbar-item__link"
-        href="/mes-documents"
-      >
+      <a key="MES DOCUMENTS link" href="/mes-documents" target="_">
+        <Svg src={textSnippet} aria-hidden />
         MES DOCUMENTS
       </a>
     </Header>
diff --git a/client/look-and-feel/css/src/Layout/Header/BurgerMenu/BurgerMenu.scss b/client/look-and-feel/css/src/Layout/Header/BurgerMenu/BurgerMenu.scss
new file mode 100644
index 0000000000..877002baef
--- /dev/null
+++ b/client/look-and-feel/css/src/Layout/Header/BurgerMenu/BurgerMenu.scss
@@ -0,0 +1,48 @@
+@use "../../../common/common" as common;
+
+.af-burger-menu.af-card {
+  display: none;
+
+  @include common.media-breakpoint-down(md) {
+    position: absolute;
+    width: 100%;
+    padding: 0;
+    border-radius: 0 0 common.rem(8) common.rem(8);
+    list-style-type: none;
+
+    & > ul {
+      padding: 0;
+      list-style-type: none;
+    }
+
+    .af-list__item {
+      padding: 0;
+
+      .af-click-item {
+        gap: common.rem(16);
+        box-shadow: none;
+
+        & > svg {
+          fill: var(--color-axa);
+        }
+
+        &__label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: common.rem(16);
+          font-size: common.rem(16);
+          font-weight: 400;
+
+          & > svg {
+            fill: var(--color-axa);
+          }
+        }
+      }
+    }
+
+    &.open {
+      display: block;
+    }
+  }
+}
diff --git a/client/look-and-feel/css/src/Layout/Header/Header.scss b/client/look-and-feel/css/src/Layout/Header/Header.scss
index ff08a8ca7c..175e19a7d9 100644
--- a/client/look-and-feel/css/src/Layout/Header/Header.scss
+++ b/client/look-and-feel/css/src/Layout/Header/Header.scss
@@ -2,84 +2,92 @@
 
 .af-header {
   position: sticky;
-  z-index: 100;
+  z-index: 2;
   top: 0;
   background-color: var(--color-white);
-}
-
-.af-header-container {
-  display: flex;
-  width: 100%;
-  height: 72px;
-  padding: 0 1rem;
-  border-top: 2px solid var(--color-axa);
-  border-bottom: 1px solid var(--color-gray-300);
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: var(--font-family-sans-serif);
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-axa);
 
-  & .af-btn-client {
-    min-width: initial;
+  & > .af-header-container {
+    display: flex;
+    width: auto;
+    height: common.rem(80);
+    padding: 0 3.75rem;
+    border-top: 2px solid var(--color-axa);
+    border-bottom: 1px solid var(--color-gray-300);
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--font-family-sans-serif);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-axa);
 
-    & > svg {
-      display: none;
+    @include common.media-breakpoint-down(md) {
+      width: 100%;
+      height: 72px;
+      padding: 0 1rem;
     }
-  }
-}
 
-.af-logo {
-  width: 40px;
-  height: 40px;
-  align-self: center;
-}
+    & > .af-header-left-item {
+      display: flex;
+      height: 5rem;
+      flex-direction: row;
+      align-items: center;
+      gap: 1.5rem;
 
-.af-header-left-item > nav {
-  display: none;
-}
+      & > .af-logo {
+        width: 56px;
+        height: 56px;
 
-.af-header-right-item {
-  display: flex;
-  margin: 0 var(--spacing-u1);
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-u1);
-}
+        @include common.media-breakpoint-down(md) {
+          width: 40px;
+          height: 40px;
+          align-self: center;
+        }
+      }
 
-@media only screen and (width >= #{common.$breakpoint-md}) {
-  .af-header-container {
-    width: auto;
-    height: 80px;
-    padding: 0 3.75rem;
-    border-top: 2px solid var(--color-axa);
+      & > nav {
+        display: block;
+      }
 
-    & .af-btn-client > svg {
-      display: block;
+      @include common.media-breakpoint-down(md) {
+        & > nav {
+          display: none;
+        }
+      }
     }
-  }
 
-  .af-logo {
-    width: 56px;
-    height: 56px;
-  }
+    & > .af-header-right-item {
+      display: flex;
+      margin: 0;
+      flex-direction: row;
+      gap: var(--spacing-u2);
 
-  .af-header-left-item {
-    display: flex;
-    height: 5rem;
-    flex-direction: row;
-    align-items: center;
-    gap: 1.5rem;
+      @include common.media-breakpoint-down(md) {
+        display: none;
+      }
+    }
 
-    & > nav {
-      display: block;
+    & > .af-btn-client {
+      display: none;
+
+      @include common.media-breakpoint-down(md) {
+        display: block;
+      }
     }
   }
+}
 
-  .af-header-right-item {
-    margin: 0;
-    gap: var(--spacing-u2);
+.af-header-overlay {
+  display: none;
+
+  @include common.media-breakpoint-down(md) {
+    &.open {
+      position: fixed;
+      z-index: 1;
+      inset: 0;
+      display: block;
+      opacity: 0.5;
+      background: var(--color-gray-900);
+    }
   }
 }
diff --git a/client/look-and-feel/css/src/Layout/Header/NavBar/NavBar.scss b/client/look-and-feel/css/src/Layout/Header/NavBar/NavBar.scss
index ac6b72b8db..980d42cc11 100644
--- a/client/look-and-feel/css/src/Layout/Header/NavBar/NavBar.scss
+++ b/client/look-and-feel/css/src/Layout/Header/NavBar/NavBar.scss
@@ -1,3 +1,5 @@
+@use "../../../common/common" as common;
+
 .af-navbar-container {
   display: flex;
   height: 5rem;
@@ -7,42 +9,46 @@
   align-items: center;
   gap: 1.6rem;
   list-style-type: none;
-}
-
-.af-navbar-item {
-  height: 100%;
-  cursor: pointer;
 
-  &__link {
-    display: inline-block;
-    box-sizing: border-box;
-    min-width: 8.4rem;
+  .af-navbar-item {
     height: 100%;
-    padding: 1.625rem 1.5rem;
-    font-family: var(--font-family-base);
-    font-size: 1.125rem;
-    font-weight: 400;
-    line-height: 1.4rem;
-    text-align: center;
-    text-decoration: none;
-    color: var(--color-gray-900);
+    cursor: pointer;
 
-    &:focus,
-    &--active {
-      border-bottom: 4px solid var(--color-axa);
-      font-weight: 600;
-      line-height: 1.6rem;
-      text-decoration: none;
-      color: var(--color-axa);
-      outline: none;
-    }
-
-    &:not(:focus, --active):hover {
-      border-bottom: 2px solid var(--color-gray-300);
+    &__link {
+      display: inline-block;
+      box-sizing: border-box;
+      min-width: 8.4rem;
+      height: 100%;
+      padding: 1.625rem 1.5rem;
+      font-family: var(--font-family-base);
+      font-size: 1.125rem;
       font-weight: 400;
       line-height: 1.4rem;
+      text-align: center;
       text-decoration: none;
       color: var(--color-gray-900);
+
+      & > svg {
+        display: none;
+      }
+
+      &:focus,
+      &--active {
+        border-bottom: 4px solid var(--color-axa);
+        font-weight: 600;
+        line-height: 1.6rem;
+        text-decoration: none;
+        color: var(--color-axa);
+        outline: none;
+      }
+
+      &:not(:focus, --active):hover {
+        border-bottom: 2px solid var(--color-gray-300);
+        font-weight: 400;
+        line-height: 1.4rem;
+        text-decoration: none;
+        color: var(--color-gray-900);
+      }
     }
   }
 }
diff --git a/client/look-and-feel/css/src/Layout/Header/PreviousLink/PreviousLink.scss b/client/look-and-feel/css/src/Layout/Header/PreviousLink/PreviousLink.scss
index fc1a8a9bcc..568dcaa9fc 100644
--- a/client/look-and-feel/css/src/Layout/Header/PreviousLink/PreviousLink.scss
+++ b/client/look-and-feel/css/src/Layout/Header/PreviousLink/PreviousLink.scss
@@ -6,6 +6,10 @@
   align-items: center;
   gap: 0.25rem;
 
+  @include common.media-breakpoint-up(md) {
+    padding: 1.5rem 0 0 7.5rem;
+  }
+
   .af-btn-client--header-previous-link {
     font-size: common.rem(16);
     font-weight: 400;
@@ -15,14 +19,8 @@
     svg {
       fill: var(--color-gray-700);
     }
-  }
-}
-
-@media only screen and (width >= #{common.$breakpoint-md}) {
-  .af-header-previous-link-container {
-    padding: 1.5rem 0 0 7.5rem;
 
-    .af-btn-client--header-previous-link {
+    @include common.media-breakpoint-up(md) {
       font-size: common.rem(18);
       line-height: common.rem(22.5);
     }
diff --git a/client/look-and-feel/css/src/common/common.scss b/client/look-and-feel/css/src/common/common.scss
index 84fd51b68a..838d1d806c 100644
--- a/client/look-and-feel/css/src/common/common.scss
+++ b/client/look-and-feel/css/src/common/common.scss
@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:list";
+
 @forward "./mixins";
 
 $font-family-sans-serif: "Source Sans Pro", arial, sans-serif !default;
@@ -101,10 +104,103 @@ $error-custom-bg: #ffbfbf !default;
 $color-alertDanger-colorBorder: #c8b282 !default;
 $color-alertDanger-bgColor: #f1d596 !default;
 
-// breakpoints
+// Grid breakpoints
 
 $breakpoint-xs: 0 !default;
 $breakpoint-sm: 667px !default;
 $breakpoint-md: 1023px !default;
 $breakpoint-lg: 1279px !default;
 $breakpoint-xl: 1599px !default;
+
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: $breakpoint-xs,
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+);
+
+// Breakpoint viewport sizes and media queries.
+
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+
+//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)
+
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+// Name of the next breakpoint, or null for the last breakpoint.
+
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+
+  @return if(
+    $n < list.length($breakpoint-names),
+    list.nth($breakpoint-names, $n + 1),
+    null
+  );
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+
+//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    667px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+
+//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    1022.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+
+  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
diff --git a/client/look-and-feel/css/src/look-and-feel.scss b/client/look-and-feel/css/src/look-and-feel.scss
index 1885797f29..775253dc3c 100644
--- a/client/look-and-feel/css/src/look-and-feel.scss
+++ b/client/look-and-feel/css/src/look-and-feel.scss
@@ -7,7 +7,6 @@
 @use "Divider/Divider";
 @use "Layout/Footer/Footer";
 @use "Stepper/Stepper";
-@use "Layout/Header/Header";
 @use "Form/Radio/Radio";
 @use "Tabs/Tabs";
 @use "Form/Checkbox/Checkbox";
@@ -28,6 +27,8 @@
 @use "Tag/Tag";
 @use "Form/InputError/InputError";
 @use "IconBg/IconBg";
+@use "Layout/Header/BurgerMenu/BurgerMenu";
+@use "Layout/Header/Header";
 @use "Layout/Header/NavBar/NavBar";
 @use "Layout/Header/PreviousLink/PreviousLink";
 @use "Title/Title";
diff --git a/client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
new file mode 100644
index 0000000000..2f487dbe64
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
@@ -0,0 +1,78 @@
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type ReactElement,
+  ReactNode,
+  type SetStateAction,
+} from "react";
+
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+
+type BurgerMenuProps = {
+  isOpen: boolean;
+  items: ReactElement[];
+  setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+
+const BurgerMenu = ({
+  isOpen,
+  items,
+  setActiveLink,
+  setIsOpen,
+  ...props
+}: BurgerMenuProps) => {
+  const handleOnClick = (index: number) => () => {
+    setActiveLink(index);
+    setIsOpen(false);
+  };
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Menu principal mobile"
+      aria-hidden={!isOpen}
+      className={classNames("af-card", "af-card--list", "af-burger-menu", {
+        open: isOpen,
+      })}
+      {...props}
+    >
+      <ul role="menubar">
+        {items.map((item, index) => {
+          const { key, props: itemProps, type } = item;
+          const { children, ...otherProps } = itemProps as {
+            children: ReactNode;
+          } & Record<string, unknown>;
+
+          return (
+            <li
+              key={key ?? `list item ${index}`}
+              className="af-list__item"
+              role="none"
+            >
+              <ClickItem
+                classModifier="small"
+                onClick={handleOnClick(index)}
+                parentClickComponent={createClickItemParent(type, {
+                  ...otherProps,
+                  role: "menuitem",
+                })}
+              >
+                {children}
+              </ClickItem>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+export { BurgerMenu };
diff --git a/client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
new file mode 100644
index 0000000000..280d71b1a5
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { BurgerMenu } from "../BurgerMenu";
+
+describe("BurgerMenu Component", () => {
+  const items = [
+    <a key="home link" href="/">
+      Home
+    </a>,
+    <a key="about link" href="/about">
+      About
+    </a>,
+  ];
+
+  const setActiveLink = vi.fn();
+  const setIsOpen = vi.fn();
+
+  it("should not render when items array is empty", () => {
+    const { container } = render(
+      <BurgerMenu
+        isOpen={false}
+        items={[]}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a nav element with correct ARIA attributes", () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const nav = screen.getByRole("navigation", {
+      name: /menu principal mobile/i,
+    });
+
+    expect(nav).toHaveAttribute("aria-hidden", "false");
+  });
+
+  it("should call setActiveLink and setIsOpen when a menu item is clicked", async () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const menuItem = screen.getAllByRole("menuitem");
+
+    expect(menuItem).toHaveLength(2);
+
+    await userEvent.click(menuItem[0]);
+    expect(setActiveLink).toHaveBeenCalledWith(0);
+    expect(setIsOpen).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/client/look-and-feel/react/src/Layout/Header/BurgerMenu/index.ts b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/index.ts
new file mode 100644
index 0000000000..5a0735dad3
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/BurgerMenu/index.ts
@@ -0,0 +1 @@
+export { BurgerMenu } from "./BurgerMenu";
diff --git a/client/look-and-feel/react/src/Layout/Header/Header.tsx b/client/look-and-feel/react/src/Layout/Header/Header.tsx
index 2430c2c050..b4e90ecfde 100644
--- a/client/look-and-feel/react/src/Layout/Header/Header.tsx
+++ b/client/look-and-feel/react/src/Layout/Header/Header.tsx
@@ -1,54 +1,115 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import {
-  type ComponentPropsWithoutRef,
+  Children,
+  ComponentProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
 
-type HeaderProps = {
-  defaultActiveLink?: number;
-  previousLink?: ReactNode;
-  rightItem?: ReactNode[];
-} & ComponentPropsWithoutRef<"header">;
+type HeaderProps = PropsWithChildren<
+  {
+    defaultActiveLink?: number;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+  } & ComponentProps<"header">
+>;
 
 export const Header = ({
   children,
   defaultActiveLink,
   previousLink,
   rightItem,
+  ...props
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+
   const resetActiveLink = useCallback(
     () => setActiveLink(defaultActiveLink),
     [defaultActiveLink],
   );
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > BREAKPOINT.MD && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOpen]);
+
+  const burgerMenuItems = useMemo<ReactElement[]>(() => {
+    const mapValidElements = (
+      items: ReactNode | ReactElement | ReactElement[],
+    ) =>
+      (
+        Children.map(items, (child) => isValidElement(child) && child) ?? []
+      ).filter(Boolean);
+    const validLinks = mapValidElements(children);
+
+    if (!rightItem || !isValidElement(rightItem)) {
+      return validLinks;
+    }
+    if (Array.isArray(rightItem)) {
+      return [...validLinks, ...mapValidElements(rightItem)];
+    }
+    return [...validLinks, rightItem];
+  }, [children, rightItem]);
+
   return (
     <>
-      <header className="af-header">
+      <header className="af-header" {...props}>
         <div className="af-header-container">
           <div className="af-header-left-item">
-            <img className="af-logo" src={logo} alt="" />
-            {children && (
-              <NavBar activeLink={activeLink} setActiveLink={setActiveLink}>
-                {children}
-              </NavBar>
-            )}
+            <img className="af-logo" src={logo} alt="logo AXA" />
+            <NavBar activeLink={activeLink} setActiveLink={setActiveLink}>
+              {children}
+            </NavBar>
           </div>
           {rightItem && <div className="af-header-right-item">{rightItem}</div>}
+          {burgerMenuItems && burgerMenuItems.length > 0 && (
+            <Button
+              aria-label={isOpen ? "Fermer le menu" : "Ouvrir le menu"}
+              onClick={toggleMenu}
+              variant="ghost"
+            >
+              <IconBg>
+                <Svg src={menu} aria-hidden="true" />
+              </IconBg>
+            </Button>
+          )}
         </div>
+        <BurgerMenu
+          isOpen={isOpen}
+          items={burgerMenuItems}
+          setActiveLink={setActiveLink}
+          setIsOpen={setIsOpen}
+        />
       </header>
-      {previousLink && (
-        <PreviousLink handleClick={resetActiveLink}>
-          {previousLink}
-        </PreviousLink>
+      <PreviousLink handleClick={resetActiveLink}>{previousLink}</PreviousLink>
+      {burgerMenuItems && burgerMenuItems.length > 0 && (
+        <div className={`af-header-overlay ${isOpen ? "open" : ""}`} />
       )}
     </>
   );
diff --git a/client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx b/client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx
index e15330de33..d99e816d1e 100644
--- a/client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx
+++ b/client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx
@@ -11,6 +11,7 @@ import {
   cloneElement,
 } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+import classNames from "classnames";
 
 type NavBarProps = {
   activeLink?: number;
@@ -21,7 +22,7 @@ const NavBar = ({
   activeLink,
   children,
   setActiveLink,
-  ...otherProps
+  ...props
 }: PropsWithChildren<NavBarProps>) => {
   const validChildren = useMemo<ReactElement[]>(
     () =>
@@ -31,16 +32,19 @@ const NavBar = ({
     [children],
   );
 
+  if (validChildren.length === 0) return null;
+
   return (
-    <nav role="navigation" aria-label="Menu principal" {...otherProps}>
+    <nav role="navigation" aria-label="Menu principal" {...props}>
       <ul className="af-navbar-container" role="menubar">
         {Children.map(validChildren, (child, index) => (
           <li className="af-navbar-item" role="none">
             {cloneElement<HTMLAttributes<HTMLElement>>(
               child as ReactElement<HTMLAttributes<HTMLElement>>,
               {
-                className:
-                  `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
+                className: classNames("af-navbar-item__link", {
+                  "af-navbar-item__link--active": index === activeLink,
+                }),
                 onClick: () => setActiveLink(index),
                 onFocus: () => setActiveLink(index),
                 role: "menuitem",
diff --git a/client/look-and-feel/react/src/Layout/Header/NavBar/__tests__/NavBar.test.tsx b/client/look-and-feel/react/src/Layout/Header/NavBar/__tests__/NavBar.test.tsx
new file mode 100644
index 0000000000..db07f2fd2e
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/NavBar/__tests__/NavBar.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { NavBar } from "../NavBar";
+
+describe("NavBar Component", () => {
+  const setActiveLink = vi.fn();
+  const children = [
+    <a key="home link" href="/">
+      Home
+    </a>,
+    <a key="about link" href="/about">
+      About
+    </a>,
+  ];
+
+  it("renders children with correct props", () => {
+    render(
+      <NavBar activeLink={0} setActiveLink={setActiveLink}>
+        {children}
+      </NavBar>,
+    );
+
+    const links = screen.getAllByRole("menuitem");
+
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveClass(
+      "af-navbar-item__link af-navbar-item__link--active",
+    );
+    expect(links[1]).toHaveClass("af-navbar-item__link");
+  });
+
+  it("calls setActiveLink when a link is clicked", async () => {
+    render(<NavBar setActiveLink={setActiveLink}>{children}</NavBar>);
+
+    const links = screen.getAllByRole("menuitem");
+    await userEvent.click(links[0]);
+
+    expect(setActiveLink).toHaveBeenCalledWith(0);
+  });
+
+  it("calls setActiveLink when a link is focused", async () => {
+    render(<NavBar setActiveLink={setActiveLink}>{children}</NavBar>);
+
+    const links = screen.getAllByRole("menuitem");
+    await userEvent.tab();
+
+    expect(links[0]).toHaveFocus();
+    expect(setActiveLink).toHaveBeenCalledWith(0);
+  });
+
+  it("returns null if no valid children are provided", () => {
+    const { container } = render(<NavBar setActiveLink={() => {}} />);
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/client/look-and-feel/react/src/Layout/Header/PreviousLink/PreviousLink.tsx b/client/look-and-feel/react/src/Layout/Header/PreviousLink/PreviousLink.tsx
index 4d409af0a6..17c85b6e0e 100644
--- a/client/look-and-feel/react/src/Layout/Header/PreviousLink/PreviousLink.tsx
+++ b/client/look-and-feel/react/src/Layout/Header/PreviousLink/PreviousLink.tsx
@@ -34,6 +34,8 @@ const PreviousLink = ({
     [children],
   );
 
+  if (validChildren.length === 0) return null;
+
   return (
     <div className="af-header-previous-link-container" {...otherProps}>
       {React.Children.map(validChildren, (child) =>
@@ -42,7 +44,7 @@ const PreviousLink = ({
           {
             children: (
               <>
-                <Svg src={arrowBack} />
+                <Svg src={arrowBack} aria-hidden />
                 {(child as ReactElement<ChildrenProps>).props.children}
               </>
             ),
diff --git a/client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx b/client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
new file mode 100644
index 0000000000..eb031a32c9
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    screen.getByRole("link", { name: "Retour à l'accueil" });
+  });
+
+  it("should handleClick when clicked", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
+
+    await userEvent.click(link);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx b/client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
new file mode 100644
index 0000000000..d1e5b03547
--- /dev/null
+++ b/client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    screen.getByAltText(/logo AXA/);
+  });
+
+  it("should render NavBar with children and right item if provided", () => {
+    render(<Header rightItem={rightItem}>{children}</Header>);
+
+    screen.getByRole("navigation", { name: /menu principal/i });
+    screen.getByRole("button", { name: /Mon Profil/i });
+  });
+
+  it("should render the PreviousLink component", async () => {
+    render(<Header previousLink={previousLink} />);
+
+    const link = screen.getByRole("link");
+
+    await userEvent.click(link);
+
+    expect(link).toHaveTextContent(/Retour à l'accueil/i);
+  });
+
+  it("should hide burger menu on window resize above the breakpoint", async () => {
+    render(<Header rightItem={rightItem}>{children}</Header>);
+
+    global.innerWidth = BREAKPOINT.MD - 1;
+
+    const burgerButton = screen.getByRole("button", {
+      name: /Ouvrir le menu/i,
+    });
+
+    await userEvent.click(burgerButton);
+
+    expect(burgerButton).toHaveAttribute("aria-label", "Fermer le menu");
+  });
+});
diff --git a/client/look-and-feel/react/src/Layout/Header/index.ts b/client/look-and-feel/react/src/Layout/Header/index.ts
index c940126c9a..c8798397fa 100644
--- a/client/look-and-feel/react/src/Layout/Header/index.ts
+++ b/client/look-and-feel/react/src/Layout/Header/index.ts
@@ -1 +1,4 @@
+export { BurgerMenu } from "./BurgerMenu";
 export { Header } from "./Header";
+export { NavBar } from "./NavBar";
+export { PreviousLink } from "./PreviousLink";
diff --git a/client/look-and-feel/react/src/index.ts b/client/look-and-feel/react/src/index.ts
index 69f664accf..8c773c2887 100644
--- a/client/look-and-feel/react/src/index.ts
+++ b/client/look-and-feel/react/src/index.ts
@@ -18,9 +18,7 @@ export { TextArea } from "./Form/TextArea";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
-export { Header } from "./Layout/Header";
-export { NavBar } from "./Layout/Header/NavBar/NavBar";
-export { PreviousLink } from "./Layout/Header/PreviousLink";
+export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
diff --git a/samples/vite/src/Client.tsx b/samples/vite/src/Client.tsx
index cdb8fc9c11..4fd48747ec 100644
--- a/samples/vite/src/Client.tsx
+++ b/samples/vite/src/Client.tsx
@@ -1,6 +1,6 @@
 import {
   Button as ButtonClient,
-  ButtonVariants as ButtonClientVariants,
+  buttonVariants as ButtonClientVariants,
   Svg,
   TextInput,
 } from "@axa-fr/design-system-look-and-feel-react";


Reviews:
user: login: Nourelayne
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-02-21T15:08:42Z
user: login: GuillaumeKESTEMAN
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:11:46Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:38:27Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:39:12Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:39:27Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:39:43Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:39:50Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:40:19Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:40:34Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:42:08Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:43:22Z
user: login: GuillaumeKESTEMAN
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T13:07:56Z
user: login: GuillaumeKESTEMAN
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T13:09:50Z
user: login: Nourelayne
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T13:22:03Z
user: login: GuillaumeKESTEMAN
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T13:48:33Z
user: login: a-pourrier
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T13:28:00Z
user: login: GuillaumeKESTEMAN
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T13:31:21Z

Review comments:
diff_hunk: @@ -1,46 +1,33 @@
-import React, {
-  ComponentPropsWithoutRef,
-  isValidElement,
-  PropsWithChildren,
-  useMemo,
-  type ReactElement,
-} from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.css";
+import { TBurgerMenuPops } from "../../../BurgerMenu/BurgerMenu";
 
-type NavBarProps = {
+export type NavBarProps = {
   activeLink?: number;
   setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+  links?: TBurgerMenuPops["items"];
 } & ComponentPropsWithoutRef<"nav">;
 
 const NavBar = ({
   activeLink,
-  children,
   setActiveLink,
+  links,
   ...otherProps
 }: PropsWithChildren<NavBarProps>) => {
-  const validChildren = useMemo<ReactElement[]>(
-    () =>
-      (
-        React.Children.map(
-          children,
-          (child) => isValidElement(child) && child,
-        ) ?? []
-      ).filter((c) => Boolean(c)),
-    [children],
-  );
-
   return (
     <nav role="navigation" aria-label="Menu principal" {...otherProps}>
       <ul className="af-navbar-container" role="menubar">
-        {React.Children.map(validChildren, (child, index) => (
-          <li className="af-navbar-item" role="none">
-            {React.cloneElement(child, {
-              className:
-                `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
-              onClick: () => setActiveLink(index),
-              onFocus: () => setActiveLink(index),
-              role: "menuitem",
-            })}
+        {links?.map((link, index) => (
+          <li className="af-navbar-item" role="none" key={Math.random()}>
path: client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx
user: login: Nourelayne
body: L'utilisation du Math.random comme clé peut provoquer des problèmes dans la phase de **réconciliation** du **React’s virtual DOM**, car la clé changera à chaque re-render. 

Essayes d’utiliser plutot un identifiant non aléatoire, comme par exemple un id ou un label s'il est unique.
created_at: 2025-02-21T12:39:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,46 +1,33 @@
-import React, {
-  ComponentPropsWithoutRef,
-  isValidElement,
-  PropsWithChildren,
-  useMemo,
-  type ReactElement,
-} from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.css";
+import { TBurgerMenuPops } from "../../../BurgerMenu/BurgerMenu";
 
-type NavBarProps = {
+export type NavBarProps = {
   activeLink?: number;
   setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+  links?: TBurgerMenuPops["items"];
 } & ComponentPropsWithoutRef<"nav">;
 
 const NavBar = ({
   activeLink,
-  children,
   setActiveLink,
+  links,
   ...otherProps
 }: PropsWithChildren<NavBarProps>) => {
-  const validChildren = useMemo<ReactElement[]>(
-    () =>
-      (
-        React.Children.map(
-          children,
-          (child) => isValidElement(child) && child,
-        ) ?? []
-      ).filter((c) => Boolean(c)),
-    [children],
-  );
-
   return (
     <nav role="navigation" aria-label="Menu principal" {...otherProps}>
       <ul className="af-navbar-container" role="menubar">
-        {React.Children.map(validChildren, (child, index) => (
-          <li className="af-navbar-item" role="none">
-            {React.cloneElement(child, {
-              className:
-                `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
-              onClick: () => setActiveLink(index),
-              onFocus: () => setActiveLink(index),
-              role: "menuitem",
-            })}
+        {links?.map((link, index) => (
+          <li className="af-navbar-item" role="none" key={Math.random()}>
+            <a
path: client/look-and-feel/react/src/Layout/Header/NavBar/NavBar.tsx
user: login: Nourelayne
body: J'ai remarqué que tu utilises désormais les balises anchor dans l'implémentation du composant navbar par défaut , au lieu de laisser au développeur le choix de choisir l'élément qu'il veut, cette décision a-t-elle été validée ?
created_at: 2025-02-21T12:50:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,50 +1,96 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { ComponentPropsWithoutRef, useCallback, useState } from "react";
+import { ComponentPropsWithoutRef, useEffect, useState } from "react";
+import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
-import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { ButtonClient, ButtonProps, Variants } from "../../Button/Button";
+import { BREAKPOINT } from "../../utilities";
+import { Svg } from "../../Svg";
+import { BurgerMenu, TBurgerMenuPops } from "../../BurgerMenu/BurgerMenu";
+import { NavBarProps } from "./NavBar/NavBar";
 
 type HeaderProps = {
   defaultActiveLink?: number;
-  previousLink?: JSX.Element;
-  rightItem?: JSX.Element[];
-} & ComponentPropsWithoutRef<"header">;
+  rightItem?: ButtonProps | string;
+  burgerMenuItems?: TBurgerMenuPops["items"];
+} & ComponentPropsWithoutRef<"header"> &
+  Partial<NavBarProps>;
 
 export const Header = ({
-  children,
+  links,
   defaultActiveLink,
-  previousLink,
   rightItem,
+  burgerMenuItems,
+  children,
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
-
-  const resetActiveLink = useCallback(
-    () => setActiveLink(defaultActiveLink),
-    [defaultActiveLink],
-  );
-
+  const [isActiveMenu, setisActiveMenu] = useState<boolean>(false);
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: Nourelayne
body: Je remarque ici que la fonction handleResize est appelée à chaque re-render.

Est-ce qu'il ne faut pas aussi l'appeler à chaque fois que l'event **Resize** est déclenché ?

useEffect(() => {
const handleResize = () => setScreenWidth(window.innerWidth);

window.addEventListener('resize', handleResize);
handleResize();

return () => {
  window.removeEventListener('resize', handleResize);
};
}, []);
created_at: 2025-02-21T12:57:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,50 +1,96 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { ComponentPropsWithoutRef, useCallback, useState } from "react";
+import { ComponentPropsWithoutRef, useEffect, useState } from "react";
+import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
-import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { ButtonClient, ButtonProps, Variants } from "../../Button/Button";
+import { BREAKPOINT } from "../../utilities";
+import { Svg } from "../../Svg";
+import { BurgerMenu, TBurgerMenuPops } from "../../BurgerMenu/BurgerMenu";
+import { NavBarProps } from "./NavBar/NavBar";
 
 type HeaderProps = {
   defaultActiveLink?: number;
-  previousLink?: JSX.Element;
-  rightItem?: JSX.Element[];
-} & ComponentPropsWithoutRef<"header">;
+  rightItem?: ButtonProps | string;
+  burgerMenuItems?: TBurgerMenuPops["items"];
+} & ComponentPropsWithoutRef<"header"> &
+  Partial<NavBarProps>;
 
 export const Header = ({
-  children,
+  links,
   defaultActiveLink,
-  previousLink,
   rightItem,
+  burgerMenuItems,
+  children,
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
-
-  const resetActiveLink = useCallback(
-    () => setActiveLink(defaultActiveLink),
-    [defaultActiveLink],
-  );
-
+  const [isActiveMenu, setisActiveMenu] = useState<boolean>(false);
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    handleResize();
+  }, []);
   return (
-    <>
-      <header className="af-header">
-        <div className="af-header-container">
-          <div className="af-header-left-item">
-            <img className="af-logo" src={logo} alt="" />
-            {children && (
-              <NavBar activeLink={activeLink} setActiveLink={setActiveLink}>
-                {children}
-              </NavBar>
+    <header className={`af-header ${isActiveMenu ? "active" : ""}`}>
+      <div className="af-header-container">
+        <div className="af-header-left-item">
+          <img className="af-logo" src={logo} alt="" />
+          {links && (
+            <NavBar
+              activeLink={activeLink}
+              setActiveLink={setActiveLink}
+              links={links}
+            />
+          )}
+        </div>
+        <div className="af-header-right-item">
+          {typeof rightItem === "string" && rightItem && (
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: Nourelayne
body: Est-ce qu'il serait possible de structurer ce code pour le rendre plus lisible, car il y a pas mal de conditions.

Tu peux sortir par exemple la logique dans des fonctions utilitaires à part...
created_at: 2025-02-21T13:03:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,50 +1,96 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { ComponentPropsWithoutRef, useCallback, useState } from "react";
+import { ComponentPropsWithoutRef, useEffect, useState } from "react";
+import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
-import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { ButtonClient, ButtonProps, Variants } from "../../Button/Button";
+import { BREAKPOINT } from "../../utilities";
+import { Svg } from "../../Svg";
+import { BurgerMenu, TBurgerMenuPops } from "../../BurgerMenu/BurgerMenu";
+import { NavBarProps } from "./NavBar/NavBar";
 
 type HeaderProps = {
   defaultActiveLink?: number;
-  previousLink?: JSX.Element;
-  rightItem?: JSX.Element[];
-} & ComponentPropsWithoutRef<"header">;
+  rightItem?: ButtonProps | string;
+  burgerMenuItems?: TBurgerMenuPops["items"];
+} & ComponentPropsWithoutRef<"header"> &
+  Partial<NavBarProps>;
 
 export const Header = ({
-  children,
+  links,
   defaultActiveLink,
-  previousLink,
   rightItem,
+  burgerMenuItems,
+  children,
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
-
-  const resetActiveLink = useCallback(
-    () => setActiveLink(defaultActiveLink),
-    [defaultActiveLink],
-  );
-
+  const [isActiveMenu, setisActiveMenu] = useState<boolean>(false);
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    handleResize();
+  }, []);
   return (
-    <>
-      <header className="af-header">
-        <div className="af-header-container">
-          <div className="af-header-left-item">
-            <img className="af-logo" src={logo} alt="" />
-            {children && (
-              <NavBar activeLink={activeLink} setActiveLink={setActiveLink}>
-                {children}
-              </NavBar>
+    <header className={`af-header ${isActiveMenu ? "active" : ""}`}>
+      <div className="af-header-container">
+        <div className="af-header-left-item">
+          <img className="af-logo" src={logo} alt="" />
+          {links && (
+            <NavBar
+              activeLink={activeLink}
+              setActiveLink={setActiveLink}
+              links={links}
+            />
+          )}
+        </div>
+        <div className="af-header-right-item">
+          {typeof rightItem === "string" && rightItem && (
+            <p className="af-header-text">{rightItem}</p>
+          )}
+          {typeof rightItem !== "string" &&
+            rightItem &&
+            screenSize >= BREAKPOINT.MD && (
+              <ButtonClient
+                iconLeft={rightItem?.iconLeft}
+                onClick={() => {
+                  setisActiveMenu(!isActiveMenu);
+                }}
+                variant={Variants.primary}
+                iconRight={<Svg src={arrowDropDown} />}
+              >
+                {rightItem?.value}
+              </ButtonClient>
+            )}
+          {typeof rightItem !== "string" &&
+            rightItem &&
+            screenSize <= BREAKPOINT.MD && (
+              <Svg
+                role="menu"
+                src={menu}
+                onClick={() => {
+                  setisActiveMenu(!isActiveMenu);
+                }}
+              />
             )}
-          </div>
-          {rightItem && <div className="af-header-right-item">{rightItem}</div>}
         </div>
-      </header>
-      {previousLink && (
-        <PreviousLink handleClick={resetActiveLink}>
-          {previousLink}
-        </PreviousLink>
-      )}
-    </>
+        {isActiveMenu && (
+          <BurgerMenu
+            handleClose={() => setisActiveMenu(false)}
+            items={
+              screenSize <= BREAKPOINT.MD
+                ? links?.concat(burgerMenuItems || []) || []
+                : burgerMenuItems || []
+            }
+          >
+            {children}
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: Nourelayne
body: la prop Children ici, ça correspond à quoi ?
created_at: 2025-02-21T13:07:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,87 @@
+import { ReactNode, useEffect, useState } from "react";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import { ClickItem } from "../List/ClickList";
+import "@axa-fr/design-system-look-and-feel-css/src/BurgerMenu/BurgerMenu.scss";
+import { BREAKPOINT } from "../utilities/constants";
+import { Svg } from "../Svg";
+
+export type TBurgerMenuPops = {
+  children?: ReactNode;
+  items: {
+    label: string;
+    icon?: ReactNode;
+    classModifier?: string;
+    href?: string;
+    target?: string;
+    isDisabled?: boolean;
+  }[];
+  className?: string;
+  handleClose: () => void;
+};
+export const BurgerMenu = ({
+  items,
+  className,
+  children,
+  handleClose,
+}: TBurgerMenuPops) => {
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
path: client/look-and-feel/react/src/BurgerMenu/BurgerMenu.tsx
user: login: Nourelayne
body: Meme remarque que pour le composant Header.tsx
created_at: 2025-02-21T13:09:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,87 @@
+import { ReactNode, useEffect, useState } from "react";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import { ClickItem } from "../List/ClickList";
+import "@axa-fr/design-system-look-and-feel-css/src/BurgerMenu/BurgerMenu.scss";
+import { BREAKPOINT } from "../utilities/constants";
+import { Svg } from "../Svg";
+
+export type TBurgerMenuPops = {
+  children?: ReactNode;
+  items: {
+    label: string;
+    icon?: ReactNode;
+    classModifier?: string;
+    href?: string;
+    target?: string;
+    isDisabled?: boolean;
+  }[];
+  className?: string;
+  handleClose: () => void;
+};
+export const BurgerMenu = ({
+  items,
+  className,
+  children,
+  handleClose,
+}: TBurgerMenuPops) => {
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    handleResize();
+  }, []);
+  return (
+    <nav
+      role="navigation"
+      className={[
+        "af-card af-card--list af-card--click-list af-burger-menu",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <ul className="af-list">
+        {screenSize <= BREAKPOINT.MD && (
+          <li className="af-list-close">
+            <div className="icon-container">
+              <Svg
+                src={close}
+                onClick={() => handleClose()}
+                className="icon-close"
+              />
+            </div>
+          </li>
+        )}
+        {items?.map((child) => {
+          return (
+            <li key={child.label} className="af-list__item">
+              <ClickItem
+                key={child.label}
path: client/look-and-feel/react/src/BurgerMenu/BurgerMenu.tsx
user: login: Nourelayne
body: Tu n'as pas vraiment besoin du key ici sur le composant ClickItem :)
created_at: 2025-02-21T13:13:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,87 @@
+import { ReactNode, useEffect, useState } from "react";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import { ClickItem } from "../List/ClickList";
+import "@axa-fr/design-system-look-and-feel-css/src/BurgerMenu/BurgerMenu.scss";
+import { BREAKPOINT } from "../utilities/constants";
+import { Svg } from "../Svg";
+
+export type TBurgerMenuPops = {
+  children?: ReactNode;
+  items: {
+    label: string;
+    icon?: ReactNode;
+    classModifier?: string;
+    href?: string;
+    target?: string;
+    isDisabled?: boolean;
+  }[];
+  className?: string;
+  handleClose: () => void;
+};
+export const BurgerMenu = ({
+  items,
+  className,
+  children,
+  handleClose,
+}: TBurgerMenuPops) => {
+  const [screenSize, setScreenWidth] = useState<number>(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    handleResize();
+  }, []);
+  return (
+    <nav
+      role="navigation"
+      className={[
+        "af-card af-card--list af-card--click-list af-burger-menu",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <ul className="af-list">
+        {screenSize <= BREAKPOINT.MD && (
+          <li className="af-list-close">
+            <div className="icon-container">
+              <Svg
+                src={close}
+                onClick={() => handleClose()}
+                className="icon-close"
+              />
+            </div>
+          </li>
+        )}
+        {items?.map((child) => {
+          return (
+            <li key={child.label} className="af-list__item">
+              <ClickItem
+                key={child.label}
+                icon={child.icon as ReactNode}
+                classModifier={child.classModifier}
+                href={child.href}
+                target={child.target}
+                isDisabled={child.isDisabled}
+              >
+                <div>{child.label}</div>
+              </ClickItem>
+            </li>
+          );
+        })}
+        <div
+          style={{
path: client/look-and-feel/react/src/BurgerMenu/BurgerMenu.tsx
user: login: Nourelayne
body: Pourquoi utiliser de l'inline style ici ?
created_at: 2025-02-21T13:14:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2,84 +2,92 @@
 
 .af-header {
   position: sticky;
-  z-index: 100;
+  z-index: 2;
   top: 0;
   background-color: var(--color-white);
-}
-
-.af-header-container {
-  display: flex;
-  width: 100%;
-  height: 72px;
-  padding: 0 1rem;
-  border-top: 2px solid var(--color-axa);
-  border-bottom: 1px solid var(--color-gray-300);
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: var(--font-family-sans-serif);
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-axa);
 
-  & .af-btn-client {
-    min-width: initial;
+  & > .af-header-container {
+    display: flex;
+    width: auto;
+    height: 80px;
path: client/look-and-feel/css/src/Layout/Header/Header.scss
user: login: GuillaumeKESTEMAN
body: en rem ?
created_at: 2025-03-14T07:47:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,82 @@
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type ReactElement,
+  ReactNode,
+  type SetStateAction,
+  useCallback,
+} from "react";
+
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+
+type BurgerMenuProps = {
+  isOpen: boolean;
+  items: ReactElement[];
+  setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+
+const BurgerMenu = ({
+  isOpen,
+  items,
+  setActiveLink,
+  setIsOpen,
+  ...props
+}: BurgerMenuProps) => {
+  const handleOnClick = useCallback(
+    (index: number) => () => {
+      setActiveLink(index);
+      setIsOpen(false);
+    },
+    [setActiveLink, setIsOpen],
+  );
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
user: login: GuillaumeKESTEMAN
body: pas besoin d'un useCallback pour si peu
created_at: 2025-03-14T07:52:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,82 @@
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type ReactElement,
+  ReactNode,
+  type SetStateAction,
+  useCallback,
+} from "react";
+
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+
+type BurgerMenuProps = {
+  isOpen: boolean;
+  items: ReactElement[];
+  setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+
+const BurgerMenu = ({
+  isOpen,
+  items,
+  setActiveLink,
+  setIsOpen,
+  ...props
+}: BurgerMenuProps) => {
+  const handleOnClick = useCallback(
+    (index: number) => () => {
+      setActiveLink(index);
+      setIsOpen(false);
+    },
+    [setActiveLink, setIsOpen],
+  );
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Menu principal mobile"
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
user: login: GuillaumeKESTEMAN
body: pourquoi préciser mobile alors que ce sera affiché aussi sur desktop comme cela ?
created_at: 2025-03-14T07:56:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { BurgerMenu } from "../BurgerMenu";
+
+describe("BurgerMenu Component", () => {
+  const items = [
+    <a key="home link" href="/">
+      Home
+    </a>,
+    <a key="about link" href="/about">
+      About
+    </a>,
+  ];
+
+  const setActiveLink = vi.fn();
+  const setIsOpen = vi.fn();
+
+  it("should not render when items array is empty", () => {
+    const { container } = render(
+      <BurgerMenu
+        isOpen={false}
+        items={[]}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a nav element with correct ARIA attributes", () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const nav = screen.getByRole("navigation", {
+      name: /menu principal mobile/i,
+    });
+    expect(nav).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
user: login: GuillaumeKESTEMAN
body: pas besoin, le getByRole vérifie déjà cela
created_at: 2025-03-14T07:56:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { BurgerMenu } from "../BurgerMenu";
+
+describe("BurgerMenu Component", () => {
+  const items = [
+    <a key="home link" href="/">
+      Home
+    </a>,
+    <a key="about link" href="/about">
+      About
+    </a>,
+  ];
+
+  const setActiveLink = vi.fn();
+  const setIsOpen = vi.fn();
+
+  it("should not render when items array is empty", () => {
+    const { container } = render(
+      <BurgerMenu
+        isOpen={false}
+        items={[]}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a nav element with correct ARIA attributes", () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const nav = screen.getByRole("navigation", {
+      name: /menu principal mobile/i,
+    });
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute("aria-hidden", "false");
+  });
+
+  it("should call setActiveLink and setIsOpen when a menu item is clicked", async () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const menuItem = screen.getAllByRole("menuitem");
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
user: login: GuillaumeKESTEMAN
body: vu que tu les récupères tous ce serait cool de vérifier le nombre d'items non ?
created_at: 2025-03-14T07:57:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,54 +1,119 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import {
-  type ComponentPropsWithoutRef,
+  Children,
+  ComponentProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
 
-type HeaderProps = {
-  defaultActiveLink?: number;
-  previousLink?: ReactNode;
-  rightItem?: ReactNode[];
-} & ComponentPropsWithoutRef<"header">;
+type HeaderProps = PropsWithChildren<
+  {
+    defaultActiveLink?: number;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+  } & ComponentProps<"header">
+>;
 
 export const Header = ({
   children,
   defaultActiveLink,
   previousLink,
   rightItem,
+  ...props
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: GuillaumeKESTEMAN
body: pas besoin de useCallback pour si peu
created_at: 2025-03-14T07:58:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,54 +1,119 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import {
-  type ComponentPropsWithoutRef,
+  Children,
+  ComponentProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
 
-type HeaderProps = {
-  defaultActiveLink?: number;
-  previousLink?: ReactNode;
-  rightItem?: ReactNode[];
-} & ComponentPropsWithoutRef<"header">;
+type HeaderProps = PropsWithChildren<
+  {
+    defaultActiveLink?: number;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+  } & ComponentProps<"header">
+>;
 
 export const Header = ({
   children,
   defaultActiveLink,
   previousLink,
   rightItem,
+  ...props
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
+
   const resetActiveLink = useCallback(
     () => setActiveLink(defaultActiveLink),
     [defaultActiveLink],
   );
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > BREAKPOINT.MD && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOpen]);
+
+  const burgerMenuItems = useMemo<ReactElement[]>(() => {
+    const mapValidElements = (
+      items: ReactNode | ReactElement | ReactElement[],
+    ) =>
+      (
+        Children.map(items, (child) => isValidElement(child) && child) ?? []
+      ).filter(Boolean);
+
+    const validLinks = mapValidElements(children);
+
+    let validRightItem: ReactElement[] = [];
+    if (rightItem) {
+      if (Array.isArray(rightItem)) {
+        validRightItem = mapValidElements(rightItem);
+      } else if (isValidElement(rightItem)) {
+        validRightItem = [rightItem];
+      }
+    }
+
+    return [...validLinks, ...validRightItem];
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: GuillaumeKESTEMAN
body: Je propose cette simplification, qu'en penses-tu ?

```suggestion
  const burgerMenuItems = useMemo<ReactElement[]>(() => {
    const mapValidElements = (
      items: ReactNode | ReactElement | ReactElement[],
    ) =>
      (
        Children.map(items, (child) => isValidElement(child) && child) ?? []
      ).filter(Boolean);

    const validLinks = mapValidElements(children);
    
    if(!rightItem || !isValidElement(rightItem)) {
      return validLinks;
    }

    if (Array.isArray(rightItem)) {
      return [...validLinks, ...mapValidElements(rightItem)];
    }

    return [...validLinks, rightItem];
```
created_at: 2025-03-14T08:05:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
+
+    expect(link).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: GuillaumeKESTEMAN
body: déjà vérifié avec le getByRole
created_at: 2025-03-14T08:09:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: GuillaumeKESTEMAN
body: peut-être rajouter la recherche par rapport au contenu pour confirmer que le test est correctement affiché dans le lien (avec {name: "le texte"})
created_at: 2025-03-14T08:10:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    const logo = screen.getByAltText(/logo AXA/);
+    expect(logo).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
user: login: GuillaumeKESTEMAN
body: pas besoin, le getBy vérifie déjà 
created_at: 2025-03-14T08:11:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    const logo = screen.getByAltText(/logo AXA/);
+    expect(logo).toBeInTheDocument();
+  });
+
+  it("should render NavBar with children and right item if provided", () => {
+    render(<Header rightItem={rightItem}>{children}</Header>);
+
+    const navBar = screen.getByRole("navigation", { name: /menu principal/i });
+    const rightItemButton = screen.getByRole("button", { name: /Mon Profil/i });
+
+    expect(navBar).toBeInTheDocument();
+    expect(rightItemButton).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
user: login: GuillaumeKESTEMAN
body: pas besoin, le getBy vérifie déjà
created_at: 2025-03-14T08:11:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: Nourelayne
body: sur la ligne 24, je vérifie si le lien contient un text content: Retour à l'accueil
created_at: 2025-03-14T12:38:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    const logo = screen.getByAltText(/logo AXA/);
+    expect(logo).toBeInTheDocument();
+  });
+
+  it("should render NavBar with children and right item if provided", () => {
+    render(<Header rightItem={rightItem}>{children}</Header>);
+
+    const navBar = screen.getByRole("navigation", { name: /menu principal/i });
+    const rightItemButton = screen.getByRole("button", { name: /Mon Profil/i });
+
+    expect(navBar).toBeInTheDocument();
+    expect(rightItemButton).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
user: login: Nourelayne
body: Je m'adapte au projet, j'ai vu que vous utilisez une combinaison de getBy et ToBeInDocument, du coup j'ai fait pareil...
created_at: 2025-03-14T12:39:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    const logo = screen.getByAltText(/logo AXA/);
+    expect(logo).toBeInTheDocument();
+  });
+
+  it("should render NavBar with children and right item if provided", () => {
+    render(<Header rightItem={rightItem}>{children}</Header>);
+
+    const navBar = screen.getByRole("navigation", { name: /menu principal/i });
+    const rightItemButton = screen.getByRole("button", { name: /Mon Profil/i });
+
+    expect(navBar).toBeInTheDocument();
+    expect(rightItemButton).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
user: login: Nourelayne
body: Mais je corrige, pas de souci
created_at: 2025-03-14T12:39:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Header } from "../Header";
+import { BREAKPOINT } from "../../../utilities";
+
+describe("Header Component", () => {
+  const children = (
+    <a key="link 1" href="/">
+      Home
+    </a>
+  );
+  const rightItem = (
+    <button type="button" key="button 1">
+      Mon Profil
+    </button>
+  );
+  const previousLink = <a href="/">Retour à l&apos;accueil</a>;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: BREAKPOINT.MD + 1,
+    });
+  });
+
+  it("should render the logo image with alt text", () => {
+    render(<Header />);
+
+    const logo = screen.getByAltText(/logo AXA/);
+    expect(logo).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/__tests__/Header.test.tsx
user: login: Nourelayne
body: https://github.com/AxaFrance/design-system/pull/910#discussion_r1995481813
created_at: 2025-03-14T12:39:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
+
+    expect(link).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: Nourelayne
body: https://github.com/AxaFrance/design-system/pull/910#discussion_r1995481813
created_at: 2025-03-14T12:39:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,54 +1,119 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import {
-  type ComponentPropsWithoutRef,
+  Children,
+  ComponentProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
 
-type HeaderProps = {
-  defaultActiveLink?: number;
-  previousLink?: ReactNode;
-  rightItem?: ReactNode[];
-} & ComponentPropsWithoutRef<"header">;
+type HeaderProps = PropsWithChildren<
+  {
+    defaultActiveLink?: number;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+  } & ComponentProps<"header">
+>;
 
 export const Header = ({
   children,
   defaultActiveLink,
   previousLink,
   rightItem,
+  ...props
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: Nourelayne
body: Mauvais reflexe lol
created_at: 2025-03-14T12:40:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { BurgerMenu } from "../BurgerMenu";
+
+describe("BurgerMenu Component", () => {
+  const items = [
+    <a key="home link" href="/">
+      Home
+    </a>,
+    <a key="about link" href="/about">
+      About
+    </a>,
+  ];
+
+  const setActiveLink = vi.fn();
+  const setIsOpen = vi.fn();
+
+  it("should not render when items array is empty", () => {
+    const { container } = render(
+      <BurgerMenu
+        isOpen={false}
+        items={[]}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a nav element with correct ARIA attributes", () => {
+    render(
+      <BurgerMenu
+        isOpen
+        items={items}
+        setActiveLink={setActiveLink}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const nav = screen.getByRole("navigation", {
+      name: /menu principal mobile/i,
+    });
+    expect(nav).toBeInTheDocument();
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
user: login: Nourelayne
body: https://github.com/AxaFrance/design-system/pull/910#discussion_r1995481813
created_at: 2025-03-14T12:40:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,82 @@
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type ReactElement,
+  ReactNode,
+  type SetStateAction,
+  useCallback,
+} from "react";
+
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+
+type BurgerMenuProps = {
+  isOpen: boolean;
+  items: ReactElement[];
+  setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+
+const BurgerMenu = ({
+  isOpen,
+  items,
+  setActiveLink,
+  setIsOpen,
+  ...props
+}: BurgerMenuProps) => {
+  const handleOnClick = useCallback(
+    (index: number) => () => {
+      setActiveLink(index);
+      setIsOpen(false);
+    },
+    [setActiveLink, setIsOpen],
+  );
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Menu principal mobile"
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
user: login: Nourelayne
body: Pour différencier entre la navbar qui a un aria-label: Menu principal, et qui est visible en mode desktop seulement, et le burger menu qui ne sera visible qu'en mode mobile / tablet.
created_at: 2025-03-14T12:42:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,54 +1,119 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
 import {
-  type ComponentPropsWithoutRef,
+  Children,
+  ComponentProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
   type ReactNode,
   useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
 
-type HeaderProps = {
-  defaultActiveLink?: number;
-  previousLink?: ReactNode;
-  rightItem?: ReactNode[];
-} & ComponentPropsWithoutRef<"header">;
+type HeaderProps = PropsWithChildren<
+  {
+    defaultActiveLink?: number;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+  } & ComponentProps<"header">
+>;
 
 export const Header = ({
   children,
   defaultActiveLink,
   previousLink,
   rightItem,
+  ...props
 }: HeaderProps) => {
   const [activeLink, setActiveLink] = useState<number | undefined>(
     defaultActiveLink,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => setIsOpen((prev) => !prev), []);
+
   const resetActiveLink = useCallback(
     () => setActiveLink(defaultActiveLink),
     [defaultActiveLink],
   );
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > BREAKPOINT.MD && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOpen]);
+
+  const burgerMenuItems = useMemo<ReactElement[]>(() => {
+    const mapValidElements = (
+      items: ReactNode | ReactElement | ReactElement[],
+    ) =>
+      (
+        Children.map(items, (child) => isValidElement(child) && child) ?? []
+      ).filter(Boolean);
+
+    const validLinks = mapValidElements(children);
+
+    let validRightItem: ReactElement[] = [];
+    if (rightItem) {
+      if (Array.isArray(rightItem)) {
+        validRightItem = mapValidElements(rightItem);
+      } else if (isValidElement(rightItem)) {
+        validRightItem = [rightItem];
+      }
+    }
+
+    return [...validLinks, ...validRightItem];
path: client/look-and-feel/react/src/Layout/Header/Header.tsx
user: login: Nourelayne
body: Si c'est plus lisible pour tt le monde, j'approuve :)
created_at: 2025-03-14T12:43:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,82 @@
+import {
+  type ComponentPropsWithoutRef,
+  type Dispatch,
+  type ReactElement,
+  ReactNode,
+  type SetStateAction,
+  useCallback,
+} from "react";
+
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+
+type BurgerMenuProps = {
+  isOpen: boolean;
+  items: ReactElement[];
+  setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+
+const BurgerMenu = ({
+  isOpen,
+  items,
+  setActiveLink,
+  setIsOpen,
+  ...props
+}: BurgerMenuProps) => {
+  const handleOnClick = useCallback(
+    (index: number) => () => {
+      setActiveLink(index);
+      setIsOpen(false);
+    },
+    [setActiveLink, setIsOpen],
+  );
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Menu principal mobile"
path: client/look-and-feel/react/src/Layout/Header/BurgerMenu/BurgerMenu.tsx
user: login: GuillaumeKESTEMAN
body: J'avais pas vu que c'était dans le fichier burger menu 😂 
created_at: 2025-03-14T13:07:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: GuillaumeKESTEMAN
body: Ha en effet, il n'y avait pas moyen de tout faire dans le getByRole ?
created_at: 2025-03-14T13:09:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { PreviousLink } from "../PreviousLink";
+
+describe("PreviousLink Component", () => {
+  const handleClick = vi.fn();
+
+  const children = <a href="/">Retour à l&apos;accueil</a>;
+
+  it("should not render when there are no valid children", () => {
+    const { container } = render(
+      <PreviousLink handleClick={handleClick}>{null}</PreviousLink>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render a button with the SVG icon and child content", async () => {
+    render(<PreviousLink handleClick={handleClick}>{children}</PreviousLink>);
+
+    const link = screen.getByRole("link");
path: client/look-and-feel/react/src/Layout/Header/PreviousLink/__tests__/PreviousLink.test.tsx
user: login: Nourelayne
body: si si je pense que c'est possible :)
created_at: 2025-03-14T13:22:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -6,25 +6,23 @@
   align-items: center;
   gap: 0.25rem;
 
+  @include common.media-breakpoint-up(md) {
+    padding: 1.5rem 0 0 7.5rem;
+  }
+
   .af-btn-client--header-previous-link {
-    font-size: common.rem(16);
+    font-size: 1rem;
     font-weight: 400;
-    line-height: common.rem(20);
+    line-height: 1.25rem;
path: client/look-and-feel/css/src/Layout/Header/PreviousLink/PreviousLink.scss
user: login: a-pourrier
body: Pourquoi avoir enlevé le common.rem ?
created_at: 2025-03-17T10:07:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,6 +1,6 @@
 import {
   Button as ButtonClient,
-  ButtonVariants as ButtonClientVariants,
+  buttonVariants as ButtonClientVariants,
path: samples/vite/src/Client.tsx
user: login: GuillaumeKESTEMAN
body: les variants de boutons n'existent plus, cela ne va pas marcher.
tu peux remplacer `variant={ButtonClientVariants.secondary}` par `variant="secondary"`
created_at: 2025-03-17T13:31:11Z
author_association: CONTRIBUTOR

PR comments:
user: login: JLou
created_at: 2025-02-27T08:08:54Z
body: pourrais tu corriger les erreurs de build, et ajouter des captures d'ecran dans la description de la PR stp ? :)
author_association: CONTRIBUTOR
user: login: Nourelayne
created_at: 2025-03-13T13:23:07Z
body: **Rendu final :**

![cap 2](https://github.com/user-attachments/assets/ce809c5d-8341-4a5c-a539-344f2144a76a)

![cap4](https://github.com/user-attachments/assets/e7024051-a2a2-494b-a24a-a20edf7f7b17)

![cap 5](https://github.com/user-attachments/assets/8e4d57d7-04c5-4ad8-8522-3649c41ac3cb)

Pair test **OK** avec Marie BOY

author_association: CONTRIBUTOR
user: login: GuillaumeKESTEMAN
created_at: 2025-03-14T08:12:13Z
body: @Nourelayne il y a des changements breaking change ou pas ?
Si oui ce serait bien de rajouter le label 😉 
author_association: CONTRIBUTOR
user: login: Nourelayne
created_at: 2025-03-14T12:49:26Z
body: @GuillaumeKESTEMAN Le header s'utilise tjrs de la même façon malgré les modifications que j'ai apporté.

Le seul petit changement c'est dans le type du rightItem que j'ai changé de ReactNode à ReactElement, après avoir consulté l'UI/UX, elle m'a confirmée que le rightItem est supposé contenir au max deux boutons/links donc des React elements.

author_association: CONTRIBUTOR