From 6f229920e208116336c5276c5f83ee9ee3530e8f Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Fri, 17 Jul 2020 23:33:46 +0200
Subject: [PATCH] menu toggle icon

---
 src/_includes/partials/global/site-head.njk |  6 +++++-
 src/js/components/menu-toggle.js            |  9 ++++++++-
 src/scss/components/_site-head.scss         | 20 ++++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/_includes/partials/global/site-head.njk b/src/_includes/partials/global/site-head.njk
index 1c80284..181c842 100644
--- a/src/_includes/partials/global/site-head.njk
+++ b/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>
diff --git a/src/js/components/menu-toggle.js b/src/js/components/menu-toggle.js
index df1a2be..b53d53a 100644
--- a/src/js/components/menu-toggle.js
+++ b/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';
+  }
 }
\ No newline at end of file
diff --git a/src/scss/components/_site-head.scss b/src/scss/components/_site-head.scss
index dc880db..690dec4 100644
--- a/src/scss/components/_site-head.scss
+++ b/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;
+        }
       }
     }
   }