3 files changed, 87 insertions, 22 deletions

diff --git a/public/css/nav.css b/public/css/nav.css
index 7f47cff..3ccdb1f 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -16,6 +16,7 @@
         /*margin-top: 10px;*/
         /*margin-bottom: 10px;*/
         text-wrap: nowrap;
+        background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
 }
 .nav_main > ul
 {
@@ -28,39 +29,81 @@ ul
 {
         margin: 0;
 }
-.nav_main ul, .nav_main li
+
+.nav_main ul
 {
         list-style: none;
         padding-left: 0;
 }
-.nav_main p
+.nav_main li
 {
+        list-style: none;
         padding: 7px;
+}
+.nav_main p
+{
+        display: inline-block; /* à cause du bouton sub-menu-toggle */
         margin: 0;
-        background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
+        /*background-color: #ffffffe1;*/ /* b3 = 179 = 0.7 (x 256) */
 }
-.nav_main p:hover
+.nav_main > ul > li:hover
 {
         background-color: white;
 }
-.current > a > p
+.current/* > a > p*/
 {
         background-color: white;
         font-weight: bold;
 }
-.drop-down > a > p::after
-{
-        content: ' ▼';
-        font-size: x-small;
+li:not(.current){
+        background-color: initial;
+        font-weight: initial;
 }
 
-/* faire apparaître sub-menu */
-.drop-down:hover > .sub-menu{
+/* faire apparaître les sous-menu sur PC */
+.drop-down:hover > .sub-menu,
+.drop-right:hover > .sub-menu
+{
         display: block;
 }
-.drop-right:hover > .sub-menu{
-        display: block;
+@media (pointer: fine) /* fine => précision de la souris */
+{
+        .drop-down > a > p::after
+        {
+                content: ' ▼';
+                font-size: x-small;
+        }
+        .drop-right > a > p:after
+        {
+                content: " ▶";
+                font-size: x-small;
+        }
+}
+
+/* faire apparaître les sous-menu sur smartphone */
+.sub-menu-toggle
+{
+        display: none; /* masqué par défaut */
+        background: none;
+        /*border: none;*/
+        cursor: pointer;
+        font-size: x-small;
+        vertical-align: text-bottom;
+}
+@media (pointer: coarse) /* coarse = grossier = précision écran tactile */
+{
+        .sub-menu-toggle
+        {
+                display: inline-block; /* visible sur écran tactile */
+        }
+        .drop-down.open > .sub-menu,
+        .drop-right.open > .sub-menu
+        {
+                display: block;
+        }
 }
+
+
 .sub-menu
 {
         display: none;
@@ -69,16 +112,10 @@ ul
         box-shadow: 1px 1px 3px black;
         font-size: 95%;
 }
-/*.sub-menu p:hover*/
-.nav_main p:hover
+.sub-menu li:hover /* écrase le fond blanc placé en même temps */
 {
         background-color: yellow;
 }
-.drop-right > a > p:after
-{
-        content: " ▶";
-        font-size: x-small;
-}
 
 /* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
 nav > ul > li > ul
diff --git a/public/js/main.js b/public/js/main.js
index 071a1db..6eb0162 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -8,6 +8,33 @@ function newPassword(page, id = ''){
         }, 0);
 }
 
+// ouvrir/fermer les sous-menus avec écran tactile
+document.addEventListener('DOMContentLoaded', () => { // sinon on ne trouve pas les boutons
+        document.querySelectorAll('.sub-menu-toggle').forEach(button => {
+                button.addEventListener('click', e => {
+                        e.preventDefault();
+                        const li = button.parentElement; // <li class="drop-down">
+
+                        // fermer les autres sous-menus de même niveau
+                        // :scope pour pouvoir utiliser > pour restreindre aux frères directs
+                        li.parentElement.querySelectorAll(':scope > .drop-down, :scope > .drop-right').forEach(sibling => {
+                                if(sibling !== li){
+                                        sibling.classList.remove('open'); // fermer sous-menus frères
+                                        sibling.querySelectorAll('.drop-right').forEach(desc => {
+                                                desc.classList.remove('open'); // fermer sous-menus neveux
+                                        });
+                                }
+                        });
+
+                        if(!li.classList.toggle('open')){ // fermer sous-menu
+                                li.querySelectorAll('.drop-right').forEach(desc => {
+                                        desc.classList.remove('open'); // fermer sous-menus enfants
+                                });
+                        }
+                });
+        });
+});
+
 function copyInClipBoard(link){
         // une balise <input> avec des attributs
         var element = document.createElement("input");
diff --git a/src/view/NavBuilder.php b/src/view/NavBuilder.php
index fd5f867..a9cf49c 100644
--- a/src/view/NavBuilder.php
+++ b/src/view/NavBuilder.php
@@ -53,7 +53,9 @@ class NavBuilder extends AbstractBuilder
                 {
                     $li_class .= $data->getParent() == null ? 'drop-down' : 'drop-right';
                     
-                    $nav_html .= '<li class="'. $li_class . '">' . $link . '<p id="m_' . $data->getId() . '">' . $data->getPageName() . '</p></a><ul class="sub-menu">' . "\n";
+                    $nav_html .= '<li class="'. $li_class . '">' . $link . '<p id="m_' . $data->getId() . '">' . $data->getPageName() . '</p></a>
+                            <button class="sub-menu-toggle" aria-label="Ouvrir le sous-menu">▼</button>
+                        <ul class="sub-menu">' . "\n";
                     $level++;
                     $nav_html .= $this->navMainHTML($data, $current);
                     $level--;
@@ -64,7 +66,6 @@ class NavBuilder extends AbstractBuilder
                     $nav_html .= '<li class="'. $li_class . '">' . $link . '<p id="m_' . $data->getId() . '">' . $data->getPageName() . '</p></a></li>' . "\n";
                 }
             }
-            
         }
         return $nav_html;
     }