From 722560590c50dc180d6258b46a3b094c7171f979 Mon Sep 17 00:00:00 2001
From: Matthieu Dubuget <matthieu.dubuget@gmail.com>
Date: Sun, 7 Mar 2021 12:16:09 +0100
Subject: [PATCH] =?UTF-8?q?Modif=20gestion=20nav=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html   | 53 ++++++++++++++++++++++++++++++++++++----------------
 mon_site.css | 23 +++++++++++++++++------
 2 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index f43a354..f5e5cf0 100644
--- a/index.html
+++ b/index.html
@@ -36,13 +36,32 @@
         </style>
         <script type='text/javascript'>
          /* Set the width of the side navigation to 250px */
+
+         function myShow(e){e.style.display= "inline-block";}
+
+         function myHide(e){e.style.display= "none";}
+
          function openNav() {
-             document.getElementById("mySidenav").style.width = "250px";
+             document.getElementById("mySidenav").style.width = "300px";
+             document.getElementById("fixedbuttondiv").style.visibility = "hidden";
+             document.getElementById("navContent").style.display = "block";
+             document.getElementById("closeButton").style.display = "block";
+             /* ct = document.getElementsByClassName("navcontent"); */
+             /* ct.forEach(myShow); */
+             /* document.getElementById("mySidenav").style.opacity = 1.0; */
+             /* document.getElementById("mySidenavnav").style.display = "block"; */
          }
 
          /* Set the width of the side navigation to 0 */
          function closeNav() {
-             document.getElementById("mySidenav").style.width = "0";
+             document.getElementById("mySidenav").style.width = "0px";
+             document.getElementById("navContent").style.display = "none";
+             document.getElementById("closeButton").style.display = "none";
+             /* ct = document.getElementsByClassName("navcontent"); */
+             /* ct.forEach(myHide); */
+
+             /* document.getElementById("mySidenav").style.opacity = 1.0; */
+             /* document.getElementById("mySidenavnav").style.display = "none"; */
          }
 
          /* Manage navigation visibility */
@@ -787,21 +806,23 @@
             </div>
             <!-- Todo : regarder https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav et https://www.w3schools.com/howto/howto_js_sidenav.asp -->
             <div id="mySidenav" class="sidenav">
-                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-                <nav>
+                <a id="closeButton" href="javascript:void(0)" onclick="closeNav()">&times;</a>
+                <nav id="navContent">
                     <ul>
-                        <li><a href="#descriptif">Descriptif</a></li>
-                        <li><a href="#situation">Situation</a></li>
-                        <li><a href="#plan">Plan</a></li>
-                        <li><a href="#piece_principale">Pièce principale</a></li>
-                        <li><a href="#chambre_1">Chambre 1</a></li>
-                        <li><a href="#chambre_2">Chambre 2</a></li>
-                        <li><a href="#chambre_3">Chambre 3</a></li>
-                        <li><a href="#salles_eau">Salles d’eau</a></li>
-                        <li><a href="#divers">Divers</a></li>
-                        <li><a href="#literie">Literie</a></li>
-                        <li><a href="#photos">Photos</a></li>
-                        <li><a href="#cles">Remise des clés</a></li>
+                        <li ><a  href="#descriptif">Descriptif</a></li>
+                        <li ><a  href="#situation">Situation</a></li>
+                        <li ><a  href="#plan">Plan</a></li>
+                        <li ><a  href="#piece_principale">Pièces&nbsp;:
+                            <a  href="#piece_principale" title="Cuisine et salon">🍽</a>
+                            <a  href="#chambre_1" title="Chambre 1">🛏</a>
+                            <a  href="#chambre_2" title="Chambre 2">🛏</a>
+                            <a  href="#chambre_3" title="Chambre 3">🛏</a>
+                            <a  href="#salles_eau" title="Salles d’eau">🚿</a></a>
+                        </li >
+                        <li ><a  href="#divers">Divers</a></li>
+                        <li ><a  href="#literie">Literie</a></li>
+                        <li ><a  href="#photos">Photos</a></li>
+                        <li ><a  href="#cles">Remise des clés</a></li>
                     </ul>
                 </nav>
             </div>
diff --git a/mon_site.css b/mon_site.css
index 0e11840..2e62dec 100644
--- a/mon_site.css
+++ b/mon_site.css
@@ -1025,27 +1025,31 @@ table {width: 450px; height: 204px;border-collapse: collapse; border-spacing: 0p
 tr.table_header {height: 19px;background-color: rgb(230, 230, 230);font-weight: bold;}
 p.vert {writing-mode: tb-rl}
 
+div#mySidenav { width = 0px;}
+
 /* The side navigation menu */
-.sidenav {
+div.sidenav {
     height: 100%; /* 100% Full-height */
-    width: 0; /* 0 width - change this with JavaScript */
+    width: 0px; /* 0 width - change this with JavaScript */
     position: fixed; /* Stay in place */
-    z-index: 1; /* Stay on top */
+    z-index: 3; /* Stay on top */
     top: 0; /* Stay at the top */
     left: 0;
     background-color: #111; /* Black*/
-    overflow-x: hidden; /* Disable horizontal scroll */
+    over>flow-x: hidden; /* Disable horizontal scroll */
     padding-top: 40px; /* Place content 60px from the top */
-    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+    transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
 }
 
+.sidenav nav { display: none}
+
 /* The navigation menu links */
 .sidenav a {
     padding: 8px 8px 8px 8px;
     text-decoration: none;
     /* font-size: 25px; */
     color: #818181;
-    display: block;
+    display: inline-block;
     transition: 0.3s;
 }
 
@@ -1063,8 +1067,15 @@ p.vert {writing-mode: tb-rl}
     margin-left: 40px;
 }
 
+a#closeButton {
+    display: none;
+    text-align: end;
+    font-size: 26px;
+}
+
 #fixedbutton {
     position: fixed;
     top: 10px;
     left: 10px;
+    z-index: 2;
 }