🎨 Visuals improvements and introduced filters

ProjetProgWeb/app.js

@@ -16,7 +16,6 @@ let error = document.querySelector('#error')
 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')
 let ham = document.querySelector('#hamburgerSvg')
 let cross = document.querySelector('#crossSvg')
@@ -266,14 +265,11 @@ function switchHam(q) {
     if (q) {
         ham.classList.add('spin-fade')
         cross.classList.remove('spin-fade')
-        header.classList.remove('slide-out-header')
-        header.classList.add('slide-in-header')
         hamMenu.classList.remove('slide-out')
         hamMenu.classList.add('slide-in')
     } else {
         cross.classList.add('spin-fade')
         ham.classList.remove('spin-fade')
-        header.classList.replace('slide-in-header', 'slide-out-header')
         hamMenu.classList.replace('slide-in', 'slide-out')
     }
 }

ProjetProgWeb/navbar.php

@@ -23,6 +23,18 @@
 
     <div id="hamburger-menu">
 
+        <div>
+            <h3>Filtres : </h3>
+            <div class="filters">
+                <p>Auto</p>
+                <p>Auteur</p>
+                <p>Titre</p>
+                <p>Date</p>
+            </div>
+        </div>
+
+        <div>
+            <h3>Options : </h3>
             <div class="chart-button">
                 <svg id="chart-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                     <path d="M13.012 5.007v-1.668l2.802-2.771c.409.136.809.293 1.197.471l-3.999 3.968zm7.089-1.93l-7.089 7.058v.853h.877l7.044-7.076c-.263-.292-.541-.57-.832-.835zm-7.089-1.468l1.437-1.406c-.46-.094-.96-.163-1.437-.203v1.609zm10.789 7.962l-1.386 1.417h1.585c-.04-.47-.106-.964-.199-1.417zm-.363-1.366c-.135-.41-.292-.81-.469-1.199l-3.951 3.982h1.668l2.752-2.783zm-1.063-2.337c-.205-.346-.426-.682-.664-1.004l-6.093 6.124h1.668l5.089-5.12zm-3.225-3.57c-.322-.238-.657-.459-1.003-.665l-5.135 5.104v1.668l6.138-6.107zm-8.15 10.702v-13c-6.161.519-11 5.683-11 11.978 0 6.639 5.382 12.022 12.021 12.022 6.296 0 11.46-4.839 11.979-11h-13z"/>
@@ -31,6 +43,7 @@
                     <div class="slider untoggle"></div>
                 </div>
             </div>
+        </div>
 
     </div>
 

ProjetProgWeb/stylesheet.css

@@ -27,23 +27,6 @@ header {
     height: 75px;
 }
 
-.slide-in-header {
-    animation: slide-in-header 200ms;
-    animation-fill-mode: forwards;
-}
-.slide-out-header {
-    animation: slide-out-header 200ms;
-    animation-fill-mode: forwards;
-}
-@keyframes slide-in-header {
-    from { margin-bottom: 0 }
-    to { margin-bottom: 100px }
-}
-@keyframes slide-out-header {
-    from { margin-bottom: 100px }
-    to { margin-bottom: 0 }
-}
-
 .navbar {
     position: relative;
     z-index: 50;
@@ -177,16 +160,40 @@ header {
     position: relative;
     z-index: 10;
     width: 100%;
-    height: 100px;
     background: linear-gradient(245deg, #39B4E7 -15%, #1779A3 110%);
     box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px;
     top: 0;
-    transform: translateY(-110px);
+    transform: translateY(-105%);
     display: flex;
     flex-direction: column;
     padding: 10px;
     gap: 10px;
 }
+
+#hamburger-menu h3 {
+    color: white;
+    padding: 0;
+    margin: 0;
+}
+
+.filters {
+    display: flex;
+    gap: 5px;
+    color: white;
+    font-family: sans-serif;
+}
+
+.filters p {
+    padding: 3px 10px 3px 10px;
+    border-radius: 10px;
+    background-color: #39B4E7;
+    cursor: pointer;
+}
+
+.filters p:hover {
+    background-color: #6dc1e3;
+}
+
 .slide-in {
     animation: slide-in 200ms;
     animation-fill-mode: forwards;
@@ -196,12 +203,12 @@ header {
     animation-fill-mode: forwards;
 }
 @keyframes slide-in {
-    from { transform: translateY(-100px) }
+    from { transform: translateY(-105%) }
     to { transform: translateY(0) }
 }
 @keyframes slide-out {
     from { transform: translateY(0) }
-    to { transform: translateY(-100px) }
+    to { transform: translateY(-105%) }
 }
 
 .toggle-switch {
@@ -283,9 +290,9 @@ header {
     display: flex;
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px;
-    border-radius: 3px;
+    border-radius: 25px;
     margin: 0 5px 0 5px;
-    padding: 0 10px 0 10px;
+    padding: 5px 15px 5px 15px;
     transform: translateX(100px);
 }
 
@@ -482,6 +489,9 @@ header {
         width: 768px;
         margin: auto;
     }
+    #hamburger-menu {
+        flex-direction: row;
+    }
 }
 
 /* Large */