js header when connected

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{