twig & js header

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

@@ -203,7 +203,7 @@ header {
           position: absolute;
           background-color: white;
           width: 550px;
-          height: 100vh;
+          height: 200vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px);
           padding: 5% 10% 5% 5%; }
@@ -217,21 +217,33 @@ header {
         header .region-header #block-reha-config-pages .bouton-contact ::before {
           content: url(../images/noun-letter-1064628.svg);
           padding-right: 1rem; }
-      header .region-header #block-reha-config-pages .config_pages--contact--full {
+      header .region-header #block-reha-config-pages .contacts {
         height: 0;
         /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
         width: 100%; }
-        header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
+        header .region-header #block-reha-config-pages .contacts .titre {
+          display: none;
+          display: inline-flex;
+          font-weight: 800;
+          position: relative;
+          margin-top: 2rem; }
+          header .region-header #block-reha-config-pages .contacts .titre ::after {
+            content: url(../images/noun-cross-1151731.svg);
+            float: right;
+            position: relative;
+            left: 200px;
+            cursor: pointer; }
+        header .region-header #block-reha-config-pages .contacts .contacts-full {
           display: none;
           background-color: white;
           position: absolute;
           right: 0px;
           top: 100%;
           width: 550px;
-          height: 100vh;
+          height: 200vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px); }
-          header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long .field__item {
+          header .region-header #block-reha-config-pages .contacts .contacts-full .field__item {
             display: flex;
             flex-direction: column;
             padding: 5% 10% 5% 5%; }
@@ -257,16 +269,27 @@ header {
           position: absolute;
           background-color: white;
           width: 550px;
-          height: 100vh;
+          height: 200vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px);
-          padding: 5% 10% 5% 5%; }
+          padding: 5% 10% 5% 45%; }
   header .bouton {
     align-self: flex-end;
     width: fit-content; }
     header .bouton h2 {
       text-transform: lowercase;
       display: inline-flex; }
+  header .titre {
+    display: inline-flex;
+    font-weight: 800;
+    position: relative;
+    margin-top: 2rem; }
+    header .titre ::after {
+      content: url(../images/noun-cross-1151731.svg);
+      float: right;
+      position: relative;
+      left: 200px;
+      cursor: pointer; }
 
 footer {
   background-color: white;

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

@@ -21,6 +21,8 @@ jQuery(document).ready(function($){
 
      // menu déroulant
 
+//////////////  contacts ///////
+
   $(document).ready(function() {
     $(".bouton-contact").click(function(event) {
           // Fermer .connexion-full s'il est déroulé
@@ -30,34 +32,54 @@ jQuery(document).ready(function($){
     // if ($(".connected-full").is(":visible")) {
     //   $(".connected-full").slideUp();
     // }
-     // Ouvrir .field--type-text-long
-      $(".field--type-text-long").slideToggle();
+     // Ouvrir .contacts-full
+      $(".contacts-full").slideToggle();
 
     });
   });
 
+//////////////  connexion ///////
 
   $(document).ready(function() {
     $(".bouton-connexion").click(function(event) {
-        // Fermer .field--type-text-long s'il est déroulé
-    if ($(".field--type-text-long").is(":visible")) {
-      $(".field--type-text-long").slideUp();
+        // Fermer .contacts-full s'il est déroulé
+    if ($(".contacts-full").is(":visible")) {
+      $(".contacts-full").slideUp();
     }
     // Ouvrir .connexion-full
       $(".connexion-full").slideToggle();
     });
   });
 
+//////////////  connected ///////
+
   $(document).ready(function() {
     $(".bouton-connected").click(function(event) {
-        // Fermer .field--type-text-long s'il est déroulé
-    if ($(".field--type-text-long").is(":visible")) {
-      $(".field--type-text-long").slideUp();
+        // Fermer .contacts-full s'il est déroulé
+    if ($(".contacts-full").is(":visible")) {
+      $(".contacts-full").slideUp();
     }
-    // Ouvrir .connexion-full
+    // Ouvrir .connected-full
       $(".connected-full").slideToggle();
     });
   });
+  
+  
+  $(document).ready(function() {
+    $(".titre").click(function(event) {
+    if ($(".connected-full").is(":visible")) {
+      $(".connected-full").slideUp();
+    }
+    if ($(".contacts-full").is(":visible")) {
+      $(".contacts-full").slideUp();
+    }
+    if ($(".contacts-full").is(":visible")) {
+      $(".contacts-full").slideUp();
+    }
+    // // Ouvrir .connexion-full
+    //   $(".connected-full").slideToggle();
+    });
+  });
 
 });
 

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

@@ -65,7 +65,7 @@ header{
                     background-color: $white-header;
                     // width: 30vw;
                     width: $width-menu-slidedown;
-                    height: 100vh;
+                    height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
                     padding: 5% 10% 5% 5%;
@@ -86,10 +86,27 @@ header{
             flex-direction: column;
             height: fit-content;
 
-            .config_pages--contact--full {
+            .contacts {
+                
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
                 width: 100%;
-                .field--type-text-long {
+                .titre{
+                    display: none;
+                    display: inline-flex;
+                    font-weight: 800;
+                    position: relative;
+                    margin-top: 2rem;
+                    ::after{
+                        content: url(../images/noun-cross-1151731.svg);
+                        float: right;
+                        position: relative;
+                        left: 200px;
+                        // bottom: 100px;
+                        cursor: pointer;
+                    }
+            
+                }
+                .contacts-full {
                     display: none;
                     background-color: $white-header;
                     position: absolute;
@@ -97,7 +114,7 @@ header{
                     top: 100%;
                     width: $width-menu-slidedown;
                     // width: 30vw;
-                    height: 100vh;
+                    height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
                     .field__item{
@@ -132,10 +149,10 @@ header{
                     background-color: $white-header;
                     // width: 30vw;
                     width: $width-menu-slidedown;
-                    height: 100vh;
+                    height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
-                    padding: 5% 10% 5% 5%;
+                    padding: 5% 10% 5% 45%;
                 }
             }
         }
@@ -150,6 +167,22 @@ header{
         }
     }
 
+    .titre{
+        display: inline-flex;
+        font-weight: 800;
+        position: relative;
+        margin-top: 2rem;
+        ::after{
+            content: url(../images/noun-cross-1151731.svg);
+            float: right;
+            position: relative;
+            left: 200px;
+            // bottom: 100px;
+            cursor: pointer;
+        }
+
+    }
+
 }
 
 

web/themes/custom/reha/templates/block--config-pages--contact.html.twig

@@ -44,6 +44,14 @@
   {% endif %}
   {{ title_suffix }}
   {% block content %}
-    {{ content }}
+<div class="contacts">
+    <div class="contacts-full">
+      <section class="titre">
+        <p> Contacts </p>
+      </section> 
+
+      {{ content }}
+    </div>
+  </div>
   {% endblock %}
 </div>

web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig

@@ -46,6 +46,9 @@
   {% block content %}
   <div class="connexion">
     <div class="connexion-full">
+            <section class="titre">
+        <p></p>
+      </section> 
       {{ content }}
     </div>
   </div>

web/themes/custom/reha/templates/block--views-block--current-user-block-block-1.html.twig

@@ -46,6 +46,10 @@
   {% block content %}
   <div class="connected">
     <div class="connected-full">
+      <section class="titre">
+        <p> Information personnelles </p>
+      </section> 
+
       {{ content }}
     </div>
   </div>