change menu label when opened

src/_includes/partials/global/site-head.njk

@@ -8,8 +8,8 @@
       </a>
       <button class="menu-toggle" onclick="menuToggle(this)" title="ouvrir / fermer le menu">
         <svg id="icon-show" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 10h12M6 16h19m-15 6h15" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
-        <svg id="icon-close" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 7L6 24m19 0L6 7" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
-        <span>menu</span>
+        <svg id="icon-close" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.5 7l-19 17m19 0L6.5 7" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
+        <span class="menu-toggle__label">menu</span>
       </button>
       {% set ariaLabel = 'navigation' %}
       {% include "partials/components/nav.njk" %}

src/js/components/menu-toggle.js

@@ -4,8 +4,10 @@ function menuToggle(elm) {
   if (menu.classList.contains('show')) {
     elm.querySelector('#icon-show').style.display = 'none';
     elm.querySelector('#icon-close').style.display = 'inline';
+    elm.querySelector('.menu-toggle__label').textContent = 'fermer';
   } else {
     elm.querySelector('#icon-show').style.display = 'inline';
     elm.querySelector('#icon-close').style.display = 'none';
+    elm.querySelector('.menu-toggle__label').textContent = 'menu';
   }
 }

src/scss/components/_site-head.scss

@@ -51,6 +51,7 @@
       + .menu-toggle {
         display: inline-flex;
         flex-direction: column;
+        align-items: center;
         background-color: var(--color-white);
         border: 0;
         margin-left: auto;