burger menu nav principal

web/themes/custom/reha/dist/css/bundle.css

@@ -340,8 +340,9 @@ header[role=banner] .region-header #block-reha-logoministere img {
 }
 @media (max-width: 891px) {
   header[role=banner] .region-header #block-reha-logoministere {
-    padding-left: 5%;
+    padding-left: 3%;
     padding-top: 0%;
+    width: 80px;
   }
 }
 header[role=banner] .region-header #block-reha-logoreha {
@@ -349,19 +350,29 @@ header[role=banner] .region-header #block-reha-logoreha {
   height: 110px;
   padding-left: 1rem;
 }
-header[role=banner] .region-header #block-reha-logoreha .field--name-field-logo {
-  height: 110px;
-}
-header[role=banner] .region-header #block-reha-logoreha .field--name-field-logo .field__item {
-  height: 110px;
+@media (max-width: 891px) {
+  header[role=banner] .region-header #block-reha-logoreha {
+    height: fit-content;
+    padding-left: 0;
+  }
 }
 header[role=banner] .region-header #block-reha-logoreha .field--name-field-logo .field__item img {
   max-height: 92px;
   width: auto;
 }
+@media (max-width: 891px) {
+  header[role=banner] .region-header #block-reha-logoreha .field--name-field-logo .field__item img {
+    max-height: 60px;
+  }
+}
 header[role=banner] .region-header #block-reha-navigationprincipale {
   grid-column: 3/span 6;
 }
+@media (max-width: 891px) {
+  header[role=banner] .region-header #block-reha-navigationprincipale {
+    padding-left: 1rem;
+  }
+}
 header[role=banner] .region-header #block-reha-navigationprincipale ul {
   display: flex;
   flex-direction: row;
@@ -369,7 +380,7 @@ header[role=banner] .region-header #block-reha-navigationprincipale ul {
 }
 @media (max-width: 1100px) {
   header[role=banner] .region-header #block-reha-navigationprincipale ul {
-    flex-direction: column;
+    width: fit-content;
   }
 }
 header[role=banner] .region-header #block-reha-navigationprincipale ul li.has-active {
@@ -1479,6 +1490,172 @@ aside.layout-sidebar-second footer.view-footer p {
   padding-right: 0.5rem;
 }
 
+/* themes/custom/reha/assets/css/menu-burger-auto.css */
+.rb-sr {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Bouton burger */
+.rb-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #111;
+  border-radius: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  cursor: pointer;
+}
+
+/* Icône */
+.rb-burger {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rb-line {
+  width: 22px;
+  height: 2px;
+  background: currentColor;
+  display: block;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+/* Anim "X" */
+.rb-toggle.is-active .rb-line:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.rb-toggle.is-active .rb-line:nth-child(2) {
+  opacity: 0;
+}
+
+.rb-toggle.is-active .rb-line:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+/* Liste (mobile) */
+#main-nav.rb-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.75rem 0 0 0;
+  display: grid;
+  gap: 0.25rem;
+}
+
+#main-nav.rb-list a {
+  display: block;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  background: #fff;
+  color: #111;
+}
+
+#main-nav.rb-list a:focus-visible {
+  outline: 2px solid #5b9aff;
+  outline-offset: 2px;
+}
+
+/* Desktop / tablette */
+@media (min-width: 768px) {
+  .rb-toggle {
+    display: none;
+  }
+  #main-nav.rb-list {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0;
+  }
+  #main-nav.rb-list a {
+    background: transparent;
+    padding: 0.5rem 0.75rem;
+  }
+  #main-nav.rb-list a:hover {
+    text-decoration: underline;
+  }
+}
+/* Impression : menu toujours visible */
+@media print {
+  .rb-toggle {
+    display: none !important;
+  }
+  #main-nav.rb-list {
+    display: block !important;
+  }
+}
+/* 1) Garantir que l’attribut hidden cache bien l’élément,
+ même si un autre CSS met un display:... */
+#main-nav[hidden] {
+  display: none !important;
+}
+
+/* 2) Fallback ultra simple : on cache le menu en mobile,
+   et on l’affiche quand le bouton est actif.
+   (Le JS insère le bouton juste AVANT le <ul>, donc l’adjacence fonctionne) */
+@media (max-width: 767px) {
+  #main-nav.rb-list {
+    display: none !important;
+  }
+  .rb-toggle.is-active + #main-nav.rb-list {
+    display: grid !important;
+  }
+}
+/* --- Empêcher le menu d'impacter la mise en page du header (mobile) --- */
+@media (max-width: 767.98px) {
+  /* Le conteneur nav sert d'ancre pour le positionnement absolu */
+  #block-reha-navigationprincipale {
+    position: relative;
+    overflow: visible; /* au cas où un parent a overflow:hidden */
+    /* optionnel : si le header a text-align:center et que tu veux
+       que le bouton reste à gauche, décommente la ligne suivante */
+    /* text-align: initial; */
+  }
+  /* Par défaut, menu masqué quand le bouton n'est pas actif */
+  #block-reha-navigationprincipale .rb-toggle + #main-nav.rb-list {
+    display: none !important;
+  }
+  /* Quand on ouvre: on montre le menu en position absolue, hors du flux */
+  #block-reha-navigationprincipale .rb-toggle.is-active + #main-nav.rb-list {
+    display: grid !important;
+  }
+  /* Sortir le UL du flux et de tout align center, en overlay sous la barre */
+  #block-reha-navigationprincipale #main-nav.rb-list {
+    position: absolute;
+    top: 100%; /* juste sous la barre de nav */
+    left: 0;
+    right: 0; /* pleine largeur du nav */
+    z-index: 1000;
+    text-align: left; /* ignore tout text-align:center parent */
+    margin: 0;
+    padding: 0.5rem;
+    background: #fff;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  }
+  #block-reha-navigationprincipale #main-nav.rb-list a {
+    display: block;
+  }
+}
+/* --- Desktop : on remet le menu dans le flux normal --- */
+@media (min-width: 768px) {
+  #block-reha-navigationprincipale #main-nav.rb-list {
+    position: static;
+    box-shadow: none;
+    padding: 0;
+  }
+}
 /*pages*/
 .home-page-layout-content {
   width: 100%;

web/themes/custom/reha/dist/menu-burger-auto.js

@@ -0,0 +1,84 @@
+/* themes/custom/reha/assets/js/menu-burger-auto.js */
+(function (Drupal) {
+  console.log("helloBurger");
+    Drupal.behaviors.rehaAutoBurger = {
+      attach: function (context) {
+        const root = context.querySelector('#block-reha-navigationprincipale');
+        if (!root) return;
+  
+        const menu = root.querySelector('#main-nav');
+        if (!menu) return;
+  
+        // Éviter le double-init
+        if (root.dataset.burgerInit === '1') return;
+        root.dataset.burgerInit = '1';
+  
+        // Crée le bouton
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'rb-toggle';
+        btn.setAttribute('aria-expanded', 'false');
+        btn.setAttribute('aria-controls', 'main-nav');
+        btn.innerHTML = `
+          <span class="rb-sr">Ouvrir le menu</span>
+          <span aria-hidden="true" class="rb-burger">
+            <span class="rb-line"></span><span class="rb-line"></span><span class="rb-line"></span>
+          </span>
+        `;
+  
+        // Insère le bouton avant la liste
+        menu.parentNode.insertBefore(btn, menu);
+  
+        // Marque le menu comme repliable
+        menu.classList.add('rb-list');
+        // Masqué par défaut en mobile (le CSS gère desktop)
+        menu.hidden = true;
+  
+        // Helpers
+        function openMenu() {
+          btn.setAttribute('aria-expanded', 'true');
+          btn.classList.add('is-active');
+          menu.hidden = false;
+          const first = menu.querySelector('a');
+          if (first) first.focus();
+        }
+        function closeMenu() {
+          btn.setAttribute('aria-expanded', 'false');
+          btn.classList.remove('is-active');
+          menu.hidden = true;
+          btn.focus();
+        }
+        function toggleMenu() {
+          (btn.getAttribute('aria-expanded') === 'true') ? closeMenu() : openMenu();
+        }
+  
+        // Événements
+        btn.addEventListener('click', toggleMenu);
+        document.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') closeMenu();
+        });
+        document.addEventListener('click', (e) => {
+          if (btn.getAttribute('aria-expanded') !== 'true') return;
+          if (!root.contains(e.target)) closeMenu();
+        });
+  
+        // Responsif : desktop >= 768px => menu toujours visible
+        const mql = window.matchMedia('(min-width: 768px)');
+        function handleMQ(e) {
+          if (e.matches) {
+            // Desktop
+            menu.hidden = false;
+            btn.setAttribute('aria-expanded', 'false');
+            btn.classList.remove('is-active');
+          } else {
+            // Mobile
+            if (btn.getAttribute('aria-expanded') !== 'true') menu.hidden = true;
+          }
+        }
+        if (mql.addEventListener) mql.addEventListener('change', handleMQ);
+        else mql.addListener(handleMQ);
+        handleMQ(mql);
+      }
+    };
+  })(Drupal);
+  

web/themes/custom/reha/reha.libraries.yml

@@ -2,6 +2,7 @@
 global:
   js:
     dist/bundle.js: {}
+    dist/menu-burger-auto.js: {}
     # js/reha.js: {}
     librairies/slick-1.8.1/slick/slick.min.js: {}
 

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

@@ -37,28 +37,40 @@ header[role=banner]{
                 }
             @media (max-width:891px) {
                 // width: 10%;
-                padding-left: 5%;
+                padding-left: 3%;
                 padding-top: 0%;
+                width: 80px;
             }   
         }
         #block-reha-logoreha{
             grid-column: 2;
             height: $header-height;
             padding-left: 1rem;
+            @media (max-width:891px) {
+               height: fit-content;
+               padding-left: 0;
+            } 
             .field--name-field-logo{
-                height: $header-height;
+                // height: $header-height;
                 .field__item{
-                    height: $header-height;
+                    // height: $header-height;
                     img{
                         max-height: 92px;
                         width: auto;
+                        @media (max-width:891px) {
+                            max-height: 60px;
+                        } 
                     }
                 }
             }
+           
         }
 
         #block-reha-navigationprincipale {
             grid-column: 3 / span 6 ;
+            @media (max-width:891px) {
+                padding-left: 1rem;
+            }
             ul{
                 display: flex;
                 flex-direction: row;
@@ -66,7 +78,9 @@ header[role=banner]{
                 
                
                 @media (max-width:1100px) {
-                    flex-direction: column;
+                    // flex-direction: column;
+                    width: fit-content;
+
                 }
                 li{
                     &.has-active {

web/themes/custom/reha/scss/partials/_menu-burger-auto.scss

@@ -0,0 +1,107 @@
+/* themes/custom/reha/assets/css/menu-burger-auto.css */
+.rb-sr {
+    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
+    overflow:hidden; clip:rect(0,0,0,0); clip-path: inset(50%); white-space:nowrap; border:0;
+  }
+  
+  /* Bouton burger */
+  .rb-toggle {
+    display:inline-flex; align-items:center; justify-content:center;
+    gap:.5rem; border:1px solid #ddd; background:#fff; color:#111;
+    border-radius:.75rem; padding:.6rem .8rem; cursor:pointer;
+  }
+  
+  /* Icône */
+  .rb-burger { display:inline-flex; flex-direction:column; gap:6px; }
+  .rb-line { width:22px; height:2px; background:currentColor; display:block;
+    transition: transform .2s ease, opacity .2s ease; }
+  
+  /* Anim "X" */
+  .rb-toggle.is-active .rb-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
+  .rb-toggle.is-active .rb-line:nth-child(2){ opacity:0; }
+  .rb-toggle.is-active .rb-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
+  
+  /* Liste (mobile) */
+  #main-nav.rb-list {
+    list-style:none; padding:0; margin:.75rem 0 0 0; display:grid; gap:.25rem;
+  }
+  #main-nav.rb-list a {
+    display:block; padding:.75rem 1rem; border-radius:.5rem; text-decoration:none;
+    background:#fff; color:#111;
+  }
+  #main-nav.rb-list a:focus-visible { outline:2px solid #5b9aff; outline-offset:2px; }
+  
+  /* Desktop / tablette */
+  @media (min-width:768px){
+    .rb-toggle{ display:none; }
+    #main-nav.rb-list { display:flex; gap:.5rem; margin-top:0; }
+    #main-nav.rb-list a { background:transparent; padding:.5rem .75rem; }
+    #main-nav.rb-list a:hover { text-decoration: underline; }
+  }
+  
+  /* Impression : menu toujours visible */
+  @media print {
+    .rb-toggle{ display:none !important; }
+    #main-nav.rb-list{ display:block !important; }
+  }
+  
+  /* 1) Garantir que l’attribut hidden cache bien l’élément,
+   même si un autre CSS met un display:... */
+#main-nav[hidden] { display: none !important; }
+
+/* 2) Fallback ultra simple : on cache le menu en mobile,
+   et on l’affiche quand le bouton est actif.
+   (Le JS insère le bouton juste AVANT le <ul>, donc l’adjacence fonctionne) */
+@media (max-width: 767px) {
+  #main-nav.rb-list { display: none !important; }
+  .rb-toggle.is-active + #main-nav.rb-list { display: grid !important; }
+}
+
+
+/* --- Empêcher le menu d'impacter la mise en page du header (mobile) --- */
+@media (max-width: 767.98px) {
+  /* Le conteneur nav sert d'ancre pour le positionnement absolu */
+  #block-reha-navigationprincipale {
+    position: relative;
+    overflow: visible; /* au cas où un parent a overflow:hidden */
+    /* optionnel : si le header a text-align:center et que tu veux
+       que le bouton reste à gauche, décommente la ligne suivante */
+    /* text-align: initial; */
+  }
+
+  /* Par défaut, menu masqué quand le bouton n'est pas actif */
+  #block-reha-navigationprincipale .rb-toggle + #main-nav.rb-list {
+    display: none !important;
+  }
+
+  /* Quand on ouvre: on montre le menu en position absolue, hors du flux */
+  #block-reha-navigationprincipale .rb-toggle.is-active + #main-nav.rb-list {
+    display: grid !important;
+  }
+
+  /* Sortir le UL du flux et de tout align center, en overlay sous la barre */
+  #block-reha-navigationprincipale #main-nav.rb-list {
+    position: absolute;
+    top: 100%;      /* juste sous la barre de nav */
+    left: 0;
+    right: 0;       /* pleine largeur du nav */
+    z-index: 1000;
+    text-align: left;  /* ignore tout text-align:center parent */
+    margin: 0;
+    padding: .5rem;
+    background: #fff;
+    box-shadow: 0 8px 20px rgba(0,0,0,.15);
+  }
+  #block-reha-navigationprincipale #main-nav.rb-list a {
+    display: block;
+  }
+}
+
+/* --- Desktop : on remet le menu dans le flux normal --- */
+@media (min-width: 768px) {
+  #block-reha-navigationprincipale #main-nav.rb-list {
+    position: static;
+    box-shadow: none;
+    padding: 0;
+  }
+}

web/themes/custom/reha/scss/reha.scss

@@ -25,6 +25,8 @@
 @import "partials/slick_custom";
 @import "partials/infos_content_actus.scss";
 @import "partials/links_content";
+@import "partials/_menu-burger-auto";
+
 
 /*pages*/
 @import "pages/home";