✨ Added reactive title to navbar

ProjetProgWeb/app.js

@@ -8,6 +8,7 @@ let errorMessage = document.querySelector('#error-message')
 let errorButton = document.querySelector('#error-button')
 let hamMenu = document.querySelector('#hamburger-menu')
 let header = document.querySelector('header')
+let title = document.querySelector('#title')
 
 function sanitize(chain) {
     return chain.replace(/[^a-zA-Z0-9 ]/g,'')
@@ -132,7 +133,11 @@ function realTimeDisplay() {
 
 document.addEventListener('click', e => {
     if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
+
         hideSuggestions()
+
+        title.style.display = 'block'
+
         if (e.target.id === 'hamburger' || e.target.id === 'hamburgerSvg' || e.target.id === 'crossSvg') {
             let ham = document.querySelector('#hamburgerSvg')
             let cross = document.querySelector('#crossSvg')
@@ -173,6 +178,10 @@ document.addEventListener('click', e => {
     }
 })
 
+searchBar.addEventListener('focus', () => {
+    title.style.display = 'none'
+})
+
 navbarForm.addEventListener('submit', e => {
     e.preventDefault()
     let data = new FormData(navbarForm)

ProjetProgWeb/navbar.php

@@ -1,13 +1,14 @@
 <header>
 
     <nav class="navbar">
-        <h1>theses.fr</h1>
 
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="hamburger">
             <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>
 
+        <h1 id="title">theses.fr</h1>
+
         <div class="research-section">
             <form class="navbar-form">
                 <input type="text" name="author" placeholder="nom auteur" onkeyup="realTimeDisplay()" id="searchbar">

ProjetProgWeb/stylesheet.css

@@ -113,7 +113,9 @@ header {
 }
 
 .navbar h1 {
-    display: none;
+    color: white;
+    font-size: xxx-large;
+    font-family: Cookie, 'sans-serif';
 }
 
 #suggestions {
@@ -142,8 +144,8 @@ header {
 
 #hamburger {
     fill: white;
-    width: 45px;
-    height: 45px;
+    min-width: 30px;
+    min-height: 30px;
 }
 
 #hamburgerSvg, #crossSvg {
@@ -377,12 +379,8 @@ header {
     }
 }
 @keyframes load {
-    0% {
-        stroke-dashoffset: 570;
-    }
-    50% {
-        stroke-dashoffset: 530;
-    }
+    0% { stroke-dashoffset: 570 }
+    50% { stroke-dashoffset: 530 }
     100% {
         stroke-dashoffset: 570;
         transform: rotate(360deg);