🚧 Improved style and introduced hamburger menu

ProjetProgWeb/app.js

@@ -1,8 +1,8 @@
-let navbarForm = document.querySelectorAll('.navbar-form')[0]
+let navbarForm = document.querySelector('.navbar-form')
-let searchBar = document.querySelectorAll('#searchbar')[0]
+let searchBar = document.querySelector('#searchbar')
-let searchBarButton = document.querySelectorAll('#search-button')[0]
+let searchBarButton = document.querySelector('#search-button')
-let suggestions = document.querySelectorAll('#suggestions')[0]
+let suggestions = document.querySelector('#suggestions')
-let loader = document.querySelectorAll('.loader')[0]
+let loader = document.querySelector('.loader')
 
 let authorName = "";
 
@@ -92,6 +92,7 @@ function showSuggestions() {
 
 document.addEventListener('click', function (e){
     if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
+        if (suggestionsDisplayed) {
             navbarForm.style.borderRadius = '15px'
             suggestions.style.display = 'none'
             searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
@@ -99,5 +100,18 @@ document.addEventListener('click', function (e){
             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')
+            }
+        }
+    }
+})

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">

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;