js header when connected

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

@@ -161,80 +161,106 @@ header {
   position: sticky;
   top: 0;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
-  header div {
+  header .region-header {
     display: inline-grid;
     align-items: center;
     grid-template-columns: repeat(10, 1fr); }
-    header div #block-reha-logoministere {
+    header .region-header #block-reha-logoministere {
       grid-column: 1;
       width: fit-content;
       padding-left: 4rem;
       height: 150px; }
-    header div #block-reha-logoreha {
+    header .region-header #block-reha-logoreha {
       grid-column: 2;
       max-height: 90%;
       height: 150px; }
-      header div #block-reha-logoreha .field--name-field-logo {
+      header .region-header #block-reha-logoreha .field--name-field-logo {
         height: 150px; }
-        header div #block-reha-logoreha .field--name-field-logo .field__item {
+        header .region-header #block-reha-logoreha .field--name-field-logo .field__item {
           height: 150px; }
-          header div #block-reha-logoreha .field--name-field-logo .field__item img {
+          header .region-header #block-reha-logoreha .field--name-field-logo .field__item img {
             height: 150px;
             width: fit-content; }
-    header div #block-reha-connexionutilisateur {
+    header .region-header #block-reha-connexionutilisateur {
       grid-column: 9;
       display: flex;
       flex-direction: column;
       height: fit-content; }
-      header div #block-reha-connexionutilisateur .bouton-connexion {
+      header .region-header #block-reha-connexionutilisateur .bouton-connexion {
         padding-right: 3rem; }
-        header div #block-reha-connexionutilisateur .bouton-connexion :before {
+        header .region-header #block-reha-connexionutilisateur .bouton-connexion :before {
           content: url(../images/noun-contact-2495375.svg);
           padding-right: 1rem; }
-      header div #block-reha-connexionutilisateur .connexion {
+      header .region-header #block-reha-connexionutilisateur .connexion {
         height: 0;
         /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
         width: 100%;
         position: relative; }
-        header div #block-reha-connexionutilisateur .connexion .connexion-full {
+        header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
           display: none;
           right: -235px;
           top: 36px;
           position: absolute;
           background-color: white;
-          width: 30vw;
+          width: 550px;
           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%; }
-    header div #block-reha-config-pages {
+    header .region-header #block-reha-config-pages {
       grid-column: 10;
       display: flex;
       flex-direction: column;
       height: fit-content; }
-      header div #block-reha-config-pages .bouton-contact {
+      header .region-header #block-reha-config-pages .bouton-contact {
         padding-right: 4rem; }
-        header div #block-reha-config-pages .bouton-contact ::before {
+        header .region-header #block-reha-config-pages .bouton-contact ::before {
           content: url(../images/noun-letter-1064628.svg);
           padding-right: 1rem; }
-      header div #block-reha-config-pages .config_pages--contact--full {
+      header .region-header #block-reha-config-pages .config_pages--contact--full {
         height: 0;
         /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
         width: 100%; }
-        header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
+        header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
           display: none;
           background-color: white;
           position: absolute;
           right: 0px;
           top: 100%;
-          width: 30vw;
+          width: 550px;
           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 {
+          header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long .field__item {
             display: flex;
             flex-direction: column;
             padding: 5% 10% 5% 5%; }
+    header .region-header #block-reha-views-block-current-user-block-block-1 {
+      grid-column: 9;
+      display: flex;
+      flex-direction: column;
+      height: fit-content; }
+      header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected {
+        padding-right: 3rem; }
+        header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected :before {
+          content: url(../images/noun-contact-2495375.svg);
+          padding-right: 1rem; }
+      header .region-header #block-reha-views-block-current-user-block-block-1 .connected {
+        height: 0;
+        /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+        width: 100%;
+        position: relative; }
+        header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full {
+          display: none;
+          right: -267px;
+          top: 36px;
+          position: absolute;
+          background-color: white;
+          width: 550px;
+          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%; }
   header .bouton {
     align-self: flex-end;
     width: fit-content; }

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

@@ -27,6 +27,9 @@ jQuery(document).ready(function($){
     if ($(".connexion-full").is(":visible")) {
       $(".connexion-full").slideUp();
     }
+    // if ($(".connected-full").is(":visible")) {
+    //   $(".connected-full").slideUp();
+    // }
      // Ouvrir .field--type-text-long
       $(".field--type-text-long").slideToggle();
 
@@ -45,6 +48,17 @@ jQuery(document).ready(function($){
     });
   });
 
+  $(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();
+    }
+    // Ouvrir .connexion-full
+      $(".connected-full").slideToggle();
+    });
+  });
+
 });
 
 

web/themes/custom/reha/scss/global/_layout.scss

@@ -1,6 +1,6 @@
 
 $header-height : 150px;
-
+$width-menu-slidedown : 550px; 
 
 .layout-container {
     position: relative;

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

@@ -14,7 +14,7 @@ header{
     // .sticky{
     //         position: fixed;
     // }
-    div{
+    .region-header{
         display: inline-grid;
         align-items: center;
         grid-template-columns: repeat(10, 1fr) ;
@@ -63,7 +63,8 @@ header{
                     top: 36px;  // Positionnez-les sous les boutons
                     position: absolute;
                     background-color: $white-header;
-                    width: 30vw;
+                    // width: 30vw;
+                    width: $width-menu-slidedown;
                     height: 100vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
@@ -94,7 +95,8 @@ header{
                     position: absolute;
                     right:0px;
                     top: 100%;
-                    width: 30vw;
+                    width: $width-menu-slidedown;
+                    // width: 30vw;
                     height: 100vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
@@ -106,6 +108,37 @@ header{
                 } 
             } 
         }
+        #block-reha-views-block-current-user-block-block-1{
+            grid-column: 9;
+            .bouton-connected{
+                padding-right: 3rem;
+                :before{
+                    content: url(../images/noun-contact-2495375.svg);
+                    padding-right: 1rem;
+                }
+            }
+            display: flex;
+            flex-direction: column;
+            height: fit-content;
+            .connected{
+                height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+                width: 100%;
+                position: relative;
+                .connected-full{
+                    display: none;
+                    right:-267px;
+                    top: 36px;  // Positionnez-les sous les boutons
+                    position: absolute;
+                    background-color: $white-header;
+                    // width: 30vw;
+                    width: $width-menu-slidedown;
+                    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%;
+                }
+            }
+        }
     }
 
     .bouton{

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

@@ -0,0 +1,53 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <button class="bouton bouton-connected">
+    <h2{{ title_attributes }}>{{ label }}</h2>
+    </button>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+  <div class="connected">
+    <div class="connected-full">
+      {{ content }}
+    </div>
+  </div>
+  {% endblock %}
+</div>

web/themes/custom/reha/templates/region.html.twig

@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region-' ~ region|clean_class,
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}