From 12903709d1873b0e3f8f2a8c9f5b198340790334 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Wed, 28 Feb 2024 10:26:28 +0100
Subject: [PATCH] js header

---
 .../css/quartiers_de_demain.css               | 13 +++++++++---
 .../js/quartiers_de_demain.js                 | 20 +++++++++++--------
 .../scss/partials/_header.scss                | 17 ++++++++++++++--
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
index 867f692..3d6d8b8 100644
--- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
+++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
@@ -152,6 +152,7 @@ header {
   max-width: 100vw;
   position: -webkit-sticky;
   position: sticky;
+  position: relative;
   top: 0;
   border-bottom: 1px solid #808080; }
   @media (max-width: 800px) {
@@ -177,12 +178,18 @@ header {
     header .language-switcher-language-url ul li:nth-child(1)::after {
       content: "/"; }
   header .header_nav_container {
-    display: grid;
+    display: none;
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 10px;
     grid-row: 3;
     grid-column: 1 /span 12;
-    background: #e8ebf4; }
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    background: #e8ebf4;
+    border-bottom: 1px solid #808080;
+    border-top: 1px solid #808080;
+    font-size: 1rem; }
     header .header_nav_container #block-quartiers-de-demain-entete {
       grid-column: 1 /span 11;
       order: 2;
@@ -204,7 +211,7 @@ header {
   header .close-block {
     order: 1;
     grid-column: 12;
-    display: grid;
+    display: none;
     margin: auto; }
     header .close-block span {
       transform-origin: center; }
diff --git a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
index 022316e..8b6b194 100644
--- a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
@@ -16,18 +16,19 @@
   
     
   } (Drupal));
+
   
   jQuery(document).ready(function($){
  
 
 
 
-    $('.close-block').click(function(){
-      $(this).parent().fadeOut();
-      if(mobile == true){
-        $("body").css("overflow","auto");
-      }
-    });
+    // $('.close-block').click(function(){
+    //   $(this).parent().fadeOut();
+    //   if(mobile == true){
+    //     $("body").css("overflow","auto");
+    //   }
+    // });
     $('.open-block').click(function(){
       $(this).prev().css("display","grid");
       if(mobile == true){
@@ -35,7 +36,10 @@
       }
     });
   
-  });
-  
+    // Hide the header_nav_container when a link inside it is clicked
+    $('.header_nav_container li').click(function() {
+        $('.header_nav_container').fadeOut();
+    });
+});
   
   
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
index be4e1ce..26bae58 100644
--- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
@@ -10,6 +10,7 @@ header{
     max-width: 100vw;
     position: -webkit-sticky;
     position: sticky;
+    position: relative;
     top: 0;
     border-bottom: 1px solid #808080;
     @media (max-width:800px) {
@@ -20,6 +21,7 @@ header{
         width: max-content;
     }
     
+    
 
      .header_left_container{
          grid-column: 1 /span 11;
@@ -60,12 +62,23 @@ header{
     }
 
     .header_nav_container{
-        display: grid;
+        display: none;
+        // display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-gap: 10px;
         grid-row: 3;
         grid-column: 1 /span 12;
+
+        position: absolute;
+        top: 100%; 
+        width: 100%;
+
         background: $bleu_fond_header;
+        border-bottom: 1px solid #808080;
+        border-top: 1px solid #808080;
+        font-size: $font-big;
+
+
 
         #block-quartiers-de-demain-entete{
             grid-column: 1 /span 11;
@@ -96,7 +109,7 @@ header{
     .close-block{
         order: 1;
         grid-column: 12;
-        display: grid;
+        display: none;
         margin: auto;
         span{
             transform-origin: center;