menu toggle icon

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

@@ -6,7 +6,11 @@
         <span class="visually-hidden">{{ site.name }} - Home</span>
         {% include "../../../images/astrolabe_logo.svg" %}
       </a>
-      <button onclick="menuToggle()">menu</button>
+      <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>
+      </button>
       {% set ariaLabel = 'navigation' %}
       {% include "partials/components/nav.njk" %}
     </div>

src/js/components/menu-toggle.js

@@ -1,4 +1,11 @@
-function menuToggle() {
+function menuToggle(elm) {
   var menu = document.getElementById('menu');
   menu.classList.toggle('show');
+  if (menu.classList.contains('show')) {
+    elm.querySelector('#icon-show').style.display = 'none';
+    elm.querySelector('#icon-close').style.display = 'inline';
+  } else {
+    elm.querySelector('#icon-show').style.display = 'inline';
+    elm.querySelector('#icon-close').style.display = 'none';
+  }
 }

src/scss/components/_site-head.scss

@@ -17,7 +17,7 @@
       outline-color: var(--color-secondary);
     }
 
-    + button {
+    + .menu-toggle {
       display: none;
     }
   }
@@ -39,7 +39,7 @@
 @media (max-width: 767.98px) {
   .site-head {
     padding-top: 2rem;
-    
+
     &__inner {
       display: flex;
       flex-wrap: wrap;
@@ -48,9 +48,21 @@
     &__site-name {
       display: inline-block;
 
-      + button {
-        display: inline-block;
+      + .menu-toggle {
+        display: inline-flex;
+        flex-direction: column;
+        background-color: var(--color-white);
+        border: 0;
         margin-left: auto;
+        padding-right: 0;
+
+        #icon-close {
+          display: none;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
       }
     }
   }