js header smoozer

web/themes/custom/reha/css/reha.css

@@ -209,22 +209,18 @@ header {
           padding-right: 1rem; }
       header div #block-reha-config-pages .config_pages--contact--full {
         float: right;
-        display: none;
-        /* Cacher initialement le contenu */
         height: 0;
         /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
         width: 100%; }
-      header div #block-reha-config-pages .field--type-text-long {
-        transition: height 0.5s;
-        /* Animation de 0.5 seconde lors de l'expansion vers le bas */
-        background-color: white;
-        display: block;
-        width: 100%;
-        height: 100vh;
-        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-        clip-path: inset(0px -10px -10px -10px); }
-        header div #block-reha-config-pages .field--type-text-long .field__item {
-          padding: 5% 10% 5% 5%; }
+        header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
+          display: none;
+          background-color: white;
+          width: 400px;
+          height: 100vh;
+          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+          clip-path: inset(0px -10px -10px -10px); }
+          header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long .field__item {
+            padding: 5% 10% 5% 5%; }
   header .bouton {
     align-self: flex-end;
     width: fit-content; }

web/themes/custom/reha/js/reha.js

@@ -25,7 +25,7 @@ jQuery(document).ready(function($){
 
   $(document).ready(function() {
     $(".bouton-contact").click(function(event) {
-      $(".config_pages--contact--full").slideToggle();
+      $(".field--type-text-long").slideToggle();
 
     });
   });

web/themes/custom/reha/scss/partials/_header.scss

@@ -56,9 +56,7 @@ header{
             height: fit-content;
             .connexion{
                 float: right;
-                // display: none; /* Cacher initialement le contenu */
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
-                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
                 width: 100%;
                 position: relative;
                 .connexion-full{
@@ -74,26 +72,6 @@ header{
                 }
             }
 
-
-            // .user-login-form{
-            //     display: none;
-            //     background-color: $white;
-            //     width: 100%;
-            //     height: 100vh;
-            //     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-            //     clip-path: inset(0px -10px -10px -10px);
-            //     padding: 5% 10% 5% 5%;
-            // }
-            // ul{
-            //     display: none;
-            //     // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
-            //     background-color: $white;
-            //     width: 100%;
-            //     height: 100vh;
-            //     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-            //     clip-path: inset(0px -10px -10px -10px);
-            //     padding: 5% 10% 5% 5%;
-            // }
         }
         #block-reha-config-pages{
             grid-column: 10;
@@ -110,24 +88,22 @@ header{
 
             .config_pages--contact--full {
                 float: right;
-                display: none; /* Cacher initialement le contenu */
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
-                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
                 width: 100%;
+                .field--type-text-long {
+                    display: none;
+                    background-color: $white;
+                    width: 400px;
+                    height: 100vh;
+                    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+                    clip-path: inset(0px -10px -10px -10px);
+                    .field__item{
+                          padding: 5% 10% 5% 5%;
+                    }
+                } 
             } 
             
-            .field--type-text-long {
-                transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
-                background-color: $white;
-                display: block;
-                width: 100%;
-                height: 100vh;
-                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-                clip-path: inset(0px -10px -10px -10px);
-                .field__item{
-                  	padding: 5% 10% 5% 5%;
-                }
-            } 
+
         }
     }