Optimisation logo header adapté taille fenêtre

css/style.css

@@ -47,21 +47,6 @@ header {
 .navbar {
     border-bottom: var(--border-header-footer);
 }
-#logo-small-screen {
-    display: none;
-}
-@media (max-width: 463px) {
-    #logo {
-        display: none;
-    }
-    .navbar-brand {
-        width: 30%;
-    }
-    #logo-small-screen {
-        display: inline-block;
-        width: 80%;
-    }
-}
 .nav-link {
     text-align: center !important;
 }

incl/header.php

@@ -45,8 +45,7 @@
                 <div class="container" id="header-container">
                     <!-- Brand -->
                     <a class="navbar-brand" href="/index.php">
-                        <img id="logo" src="/img/FunctionProject_brand-logo.png" alt="FunctionProject">
+                        <img id="logo-header" src="/img/FunctionProject_brand-logo.png" alt="FunctionProject">
-                        <img id="logo-small-screen" src="/img/FunctionProject_icon.png" alt="FunctionProject">
                     </a>
 
                     <!-- Hamburger icon on Mobile -->

scripts/main.js

@@ -230,6 +230,21 @@ $(function () {
         setInterval(change,10000);
     }
 
+    /* Changement du logo du header selon la largeur de la fenêtre */
+    $(window).resize(function() {
+        const windowWidth = $(window).width();
+        if(windowWidth < 463){
+            $('#logo-header').attr('src', '/img/FunctionProject_icon.png');
+            $('#logo-header').attr('style', 'display: inline-block;width: 80%;');
+            $('.navbar-brand').attr('style', 'width: 30%;');
+        }
+        else {
+            $('#logo-header').attr('src', '/img/FunctionProject_brand-logo.png');
+            $('#logo-header').removeAttr('style');
+            $('.navbar-brand').removeAttr('style');
+        }
+    });
+    
     /* Permet d'afficher l'heure en temps réel sur le footer */
     window.onload = realDateTime('realDateTime');