From 02511b7fae51b43d1762e3c8f0c16edbc4724a5e Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Wed, 22 Jul 2026 10:59:27 +0200
Subject: [PATCH] added close button to mobile menu

---
 assets/sass/_theme/design-system/header.sass | 22 ++++++++++++++------
 i18n/en.yml                                  |  4 +++-
 i18n/fr.yml                                  |  4 +++-
 i18n/pt.yml                                  |  4 +++-
 layouts/_partials/header/button.html         |  3 ++-
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 3449b033e..e65bda41b 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -246,20 +246,30 @@ header#document-header
                 outline-offset: 5px
                 outline-style: dashed
                 outline-width: 1px
-            @include media-breakpoint-down(desktop)
-                display: flex
-                align-items: center
-            span:first-of-type
+            .button-title
                 @include meta
                 font-size: pxToRem(14)
                 text-transform: uppercase
+                &--close
+                    display: none
+
             span:last-of-type
-                background: none
                 @include icon-block(menu-line, before)
-                    vertical-align: baseline
                     margin-right: $icon-burger-margin-right
+                    vertical-align: baseline
+                background: none
+
             &[aria-expanded="true"]
+                .button-title
+                    &--open
+                        display: none
+                    &--close
+                        display: block
                 span:last-of-type
                     &::before
                         content: map-get($icons, "close-line")
                         margin-right: $icon-close-margin-right
+
+            @include media-breakpoint-down(desktop)
+                align-items: center
+                display: flex
diff --git a/i18n/en.yml b/i18n/en.yml
index 96454d83b..d541ace53 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -195,7 +195,9 @@ commons:
     main: Main menu
     secondary: Secondary menu
     social: Socials networks menu
-    title: Menu
+    title: 
+      open: Menu
+      close: Close
     upper: Menu d'accès rapide
   more: Read more
   more_aria: Read more about “{{ .Title }}”
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 23485afd9..e70e8374e 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -196,7 +196,9 @@ commons:
     main: Menu principal
     secondary: Menu secondaire
     social: Menu réseaux sociaux
-    title: Menu
+    title: 
+      open: Menu
+      close: Fermer
     upper: Menu d'accès rapide
   more: En savoir plus
   more_aria: En savoir plus sur “{{ .Title }}“
diff --git a/i18n/pt.yml b/i18n/pt.yml
index 85a09b851..256b452e8 100644
--- a/i18n/pt.yml
+++ b/i18n/pt.yml
@@ -176,7 +176,9 @@ commons:
     main: Menu principal
     secondary: Menu secundário
     social: Menu de redes sociais
-    title: Menu
+    title:
+      open: Menu
+      close: Fechar
     upper: Menu de acesso rápido
   more: Saiba mais
   more_aria: Saiba mais sobre “{{ .Title }}“
diff --git a/layouts/_partials/header/button.html b/layouts/_partials/header/button.html
index 9e230db88..56a14b25b 100644
--- a/layouts/_partials/header/button.html
+++ b/layouts/_partials/header/button.html
@@ -3,7 +3,8 @@
     aria-expanded="false"
     aria-label="{{ i18n "commons.menu.label" }}"
     class="header-button">
-  <span>{{ i18n "commons.menu.title" }}</span>
+  <span class="button-title button-title--open">{{ i18n "commons.menu.title.open" }}</span>
+  <span class="button-title button-title--close">{{ i18n "commons.menu.title.close" }}</span>
   {{/*  djlint:off  */}}
   <span></span>
   {{/*  djlint:on  */}}