fix: Affichage du menu en JS vu qu'en CSS ça ne fonctionne pas sous iOS

assets/styles/header.sass

@@ -164,12 +164,6 @@
       flex-direction: column
       justify-content: center
 
-      &:hover
-        display: inherit
-
-      &:hover + .close-button
-        display: inherit
-
       img
         display: inherit
 
@@ -213,16 +207,19 @@
     display: none
     white-space: nowrap
 
-    &:focus + #menu
-      display: inherit
-
-    &:focus + #menu + .close-button
-      display: inherit
-
-    @media screen and (max-width: $size-md)
-      display: inherit
-
   .close-button
     white-space: nowrap
     display: none
     z-index: 200
+
+  @media screen and (max-width: $size-md)
+    .nav[data-open="true"]
+      .open-button
+        display: none
+      .close-button, #menu
+        display: inherit
+    .nav[data-open="false"]
+      .open-button
+        display: inherit
+      .close-button, #menu
+        display: none

layouts/partials/header.html

@@ -13,14 +13,14 @@
       sizes="(max-width: 600px) 500px, 1920px"
      />
   {{ end }}
-  <nav class="nav">
+  <nav class="nav" id="nav" data-open="false">
     <div class="container">
       <div class="logo">
         <a href="/" class="">
           <img src="/icons/logo-entete-200x70.svg" alt="Blason de Crémeaux" />
         </a>
       </div>
-      <button class="open-button">≡ Menu</button>
+      <button class="open-button" onClick="document.getElementById('nav').setAttribute('data-open', true)">≡ Menu</button>
       <ol id="menu">
         {{ range .Site.Menus.main }}
         <li class="menu{{ if .HasChildren }} withSubmenu{{ end }}">
@@ -39,7 +39,7 @@
         </li>
         {{ end }}
       </ol>
-      <button class="close-button">✖ Fermer</button>
+      <button class="close-button" onClick="document.getElementById('nav').setAttribute('data-open', false)">✖ Fermer</button>
     </div>
   </nav>
 </header>