close #6

assets/css/src/_mobile.scss

@@ -67,6 +67,9 @@
   }
 
   body[data-template="index"] {
+    main {
+      z-index: 2;
+    }
     .filter-menu {
       padding-top: 0;
     }
@@ -121,12 +124,19 @@
 
   .mobile-menu {
     display: flex;
+    z-index: 2;
     ul {
       font-size: var(--font-size-L);
       a {
         text-decoration: none;
       }
     }
+    .toggle-mobile-menu {
+      pointer-events: none;
+      span {
+        pointer-events: all;
+      }
+    }
   }
 
   header:hover ~ main {

assets/css/src/_nav.scss

@@ -183,14 +183,13 @@ nav.main-menu:hover {
   pointer-events: all;
 }
 
-.mobile-menu button:has(+ dialog:open) {
+.mobile-menu button:has(+ dialog::backdrop) {
   display: none;
 }
 
-dialog#mobile-menu-content:open {
+dialog#mobile-menu-content {
   padding: 0;
   border: none;
-  display: flex;
   justify-content: center;
   align-items: center;
   overflow: visible;

assets/css/style.css

@@ -508,14 +508,13 @@ nav.main-menu:hover {
   pointer-events: all;
 }
 
-.mobile-menu button:has(+ dialog:open) {
+.mobile-menu button:has(+ dialog::backdrop) {
   display: none;
 }
 
-dialog#mobile-menu-content:open {
+dialog#mobile-menu-content {
   padding: 0;
   border: none;
-  display: flex;
   justify-content: center;
   align-items: center;
   overflow: visible;
@@ -678,6 +677,9 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow p
     top: var(--slider-height);
     padding-top: 0;
   }
+  body[data-template=index] main {
+    z-index: 2;
+  }
   body[data-template=index] .filter-menu {
     padding-top: 0;
   }
@@ -719,6 +721,7 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow p
   }
   .mobile-menu {
     display: flex;
+    z-index: 2;
   }
   .mobile-menu ul {
     font-size: var(--font-size-L);
@@ -726,6 +729,12 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow p
   .mobile-menu ul a {
     text-decoration: none;
   }
+  .mobile-menu .toggle-mobile-menu {
+    pointer-events: none;
+  }
+  .mobile-menu .toggle-mobile-menu span {
+    pointer-events: all;
+  }
   header:hover ~ main {
     opacity: 1;
     transition-duration: 0;

site/snippets/mobile-menu.php

@@ -0,0 +1,31 @@
+<nav class="mobile-menu">
+
+    <button popovertarget="mobile-menu-content">
+        <h1 class="toggle-mobile-menu">
+                <span>Menu</span>
+        </h1>
+    </button>
+
+    <dialog id="mobile-menu-content" popover>
+        <h1 class="title-nav">
+            <a href="<?= page('home')->url() ?>">
+                Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
+            </a>
+        </h1>
+        <ul>
+            <li>
+                <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
+            </li>
+            <li>
+                <a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
+            </li>
+            <li>
+                <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>
+
+</nav>

site/snippets/nav.php

@@ -20,34 +20,3 @@
     </ul>
 </nav>
 
-<nav class="mobile-menu">
-
-    <button command="show-modal" commandfor="mobile-menu-content">
-        <h1 class="toggle-mobile-menu">
-                Menu
-        </h1>
-    </button>
-
-    <dialog id="mobile-menu-content" closedby="any">
-        <h1 class="title-nav">
-            <a href="<?= page('home')->url() ?>">
-                Hic&nbsp;et&nbsp;Nunc&nbsp;Studio
-            </a>
-        </h1>
-        <ul>
-            <li>
-                <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
-            </li>
-            <li>
-                <a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
-            </li>
-            <li>
-                <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
-            </li>
-        </ul>
-        <button commandfor="mobile-menu-content" command="close" class="toggle-mobile-menu">
-            Fermer
-        </button>
-    </dialog>
-
-</nav>

site/templates/home.php

@@ -1,5 +1,7 @@
 <?php snippet('header') ?>
 
+<?php snippet('mobile-menu') ?>
+
 <div id="home-slideshow">
 
     <?php foreach ($slides as $slide): ?>

site/templates/index.php

@@ -1,6 +1,6 @@
 <?php snippet('header') ?>
 
-
+<?php snippet('mobile-menu') ?>
 
 <ul class="projects-index">
     <li class="filter-menu">
@@ -21,7 +21,7 @@
                         <span> <?= $project->tags() ?> </span>
                         <span class="date"> <?= $project->date()->toDate('Y') ?> </span>
                 </button>
-                <span class="slide-number"><span class="active-index">0</span>/<?= $project->images()->count() ?></span>
+                <span class="slide-number">slide number/total slides</span>
             </div>
             <section class="toggle">
                 <div class= "project-slideshow-container">

site/templates/infos.php

@@ -1,5 +1,8 @@
 <?php snippet('header') ?>
 
+<?php snippet('mobile-menu') ?>
+
+
 <section class="main-infos">
     <p>
         <?= $page->presentation() ?>