From 69d9b45985d86a10e53fdb435cdcf48d8b8706a1 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvainpro@gmail.com>
Date: Sun, 31 Oct 2021 02:37:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Improved=20style=20and=20introdu?=
 =?UTF-8?q?ced=20hamburger=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ProjetProgWeb/app.js         | 38 ++++++++++++++++++++++++------------
 ProjetProgWeb/navbar.php     |  3 ++-
 ProjetProgWeb/stylesheet.css | 11 +++++++++++
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js
index 242f594..076a02c 100644
--- a/ProjetProgWeb/app.js
+++ b/ProjetProgWeb/app.js
@@ -1,8 +1,8 @@
-let navbarForm = document.querySelectorAll('.navbar-form')[0]
-let searchBar = document.querySelectorAll('#searchbar')[0]
-let searchBarButton = document.querySelectorAll('#search-button')[0]
-let suggestions = document.querySelectorAll('#suggestions')[0]
-let loader = document.querySelectorAll('.loader')[0]
+let navbarForm = document.querySelector('.navbar-form')
+let searchBar = document.querySelector('#searchbar')
+let searchBarButton = document.querySelector('#search-button')
+let suggestions = document.querySelector('#suggestions')
+let loader = document.querySelector('.loader')
 
 let authorName = "";
 
@@ -92,12 +92,26 @@ function showSuggestions() {
 
 document.addEventListener('click', function (e){
     if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
-        navbarForm.style.borderRadius = '15px'
-        suggestions.style.display = 'none'
-        searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
-        searchBarButton.classList.remove('animation-out')
-        searchBarButton.classList.add('animation-in')
-        suggestionsDisplayed = false
+        if (suggestionsDisplayed) {
+            navbarForm.style.borderRadius = '15px'
+            suggestions.style.display = 'none'
+            searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
+            searchBarButton.classList.remove('animation-out')
+            searchBarButton.classList.add('animation-in')
+            suggestionsDisplayed = false
+        }
+
+        if (e.target.id === 'hamburger' || e.target.id === 'hamburgerSvg' || e.target.id === 'crossSvg') {
+            let ham = document.querySelector('#hamburgerSvg')
+            let cross = document.querySelector('#crossSvg')
+            if (ham.classList.contains('spin-fade')) {
+                cross.classList.add('spin-fade')
+                ham.classList.remove('spin-fade')
+            }
+            else {
+                ham.classList.add('spin-fade')
+                cross.classList.remove('spin-fade')
+            }
+        }
     }
 })
-
diff --git a/ProjetProgWeb/navbar.php b/ProjetProgWeb/navbar.php
index 126218b..fa07a2f 100644
--- a/ProjetProgWeb/navbar.php
+++ b/ProjetProgWeb/navbar.php
@@ -4,7 +4,8 @@
 
         <!-- svg from iconmonstr -->
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="hamburger">
-            <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/>
+            <path id="hamburgerSvg" d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/>
+            <path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
         </svg>
 
         <div class="research-section">
diff --git a/ProjetProgWeb/stylesheet.css b/ProjetProgWeb/stylesheet.css
index 18b8f22..0caf8c4 100644
--- a/ProjetProgWeb/stylesheet.css
+++ b/ProjetProgWeb/stylesheet.css
@@ -50,6 +50,7 @@ body {
     width: 100%;
 }
 
+/* TODO : Ajouter une ombre quand on hover ou focus l'input (voir page google.com)*/
 /*.navbar input:hover, .navbar input:focus {*/
 /*    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px;*/
 /*}*/
@@ -131,6 +132,16 @@ body {
     height: 45px;
 }
 
+#hamburgerSvg, #crossSvg {
+    transition: 150ms;
+}
+
+.spin-fade {
+    transform-origin: center;
+    transform: rotate(90deg);
+    opacity: 0;
+}
+
 #results {
     font-family: sans-serif;
     margin: 10px;