save before redesign mobile nav

site/snippets/mobile-menu.php

@@ -1,12 +1,12 @@
-<nav class="mobile-menu">
+<div id="mobile-menu">
 
-    <button popovertarget="mobile-menu-content">
-        <h1 class="toggle-mobile-menu">
-                <span>Menu</span>
-        </h1>
-    </button>
+    <div class="mobile-menu-toggle-wrapper">
+        <button id="mobile-menu-toggle">
+            Menu
+        </button>
+    </div>
 
-    <dialog id="mobile-menu-content" popover>
+    <nav id="mobile-menu-content" >
         <h1 class="title-nav">
             <a href="<?= page('home')->url() ?>">
                 Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
@@ -23,9 +23,7 @@
                 <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
             </li>
         </ul>
-        <button popovertarget="mobile-menu-content" popovertargetaction="hide" class="toggle-mobile-menu">
-            Fermer
-        </button>
-    </dialog>
+        <div class="backdrop"></div>
+    </nav>
 
-</nav>
+</div>

site/templates/index.php

@@ -52,5 +52,6 @@
 <script src="/assets/js/project-slideshow.js"></script>
 <script src="/assets/js/project-toggle.js"></script>
 <script src="/assets/js/filter-menu.js"></script>
+<script src="/assets/js/mobile-menu-toggle.js"></script>
 <?php snippet('footer') ?>