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/images/noun-cross-1151731.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 34.696911 34.690243"
+   id="svg2"
+   sodipodi:docname="noun-cross-1151731.svg"
+   width="34.696911"
+   height="34.690243"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="5.4758349"
+     inkscape:cx="61.451816"
+     inkscape:cy="-18.079435"
+     inkscape:window-width="1920"
+     inkscape:window-height="1172"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <g
+     transform="translate(-32.678287,-985.02548)"
+     id="g1">
+    <path
+       d="m 66.970561,985.39163 c -0.390531,-0.39054 -1.023701,-0.39052 -1.41422,0 L 49.99999,1000.948 34.443649,985.39163 c -0.39053,-0.39052 -1.02368,-0.39054 -1.414209,0 -0.390541,0.39053 -0.390521,1.0237 0,1.41422 l 15.556351,15.55635 -15.556351,15.5564 c -0.390521,0.3905 -0.390541,1.0237 0,1.4142 0.390529,0.3905 1.023699,0.3905 1.41422,0 l 15.556351,-15.5564 15.55634,15.5564 c 0.390529,0.3905 1.023679,0.3905 1.41421,0 0.390539,-0.3905 0.390519,-1.0237 0,-1.4142 L 51.41421,1002.3622 66.970561,986.80584 c 0.390519,-0.39053 0.390539,-1.02368 0,-1.41421 z"
+       style="color:#000000;text-indent:0;text-transform:none;direction:ltr;baseline-shift:baseline;enable-background:accumulate"
+       fill="#000000"
+       fill-opacity="1"
+       stroke="none"
+       marker="none"
+       visibility="visible"
+       display="inline"
+       overflow="visible"
+       id="path1" />
+  </g>
+</svg>

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>