From 27d88f0b226a0bb8e07f0bea83f47a9bc4bbff32 Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 10 Jul 2025 18:11:30 +0200
Subject: =?UTF-8?q?sous-menus=20d=C3=A9roulables=20avec=20=C3=A9cran=20tac?=
 =?UTF-8?q?tile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/nav.css      | 77 ++++++++++++++++++++++++++++++++++++-------------
 public/js/main.js       | 27 +++++++++++++++++
 src/view/NavBuilder.php |  5 ++--
 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;
     }
-- 
cgit v1.2.3