premiers resultats concrets sur le menus

css/app.css

@@ -974,6 +974,166 @@ video {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes slide-in {
+  0% {
+    transform: translateY(-80%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(-80%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@-webkit-keyframes slide-out {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(-10%);
+  }
+}
+
+@-webkit-keyframes height-in {
+  0% {
+    max-height: 0px;
+  }
+
+  100% {
+    max-height: 300px;
+  }
+}
+
+@keyframes height-in {
+  0% {
+    max-height: 0px;
+  }
+
+  100% {
+    max-height: 300px;
+  }
+}
+
+@-webkit-keyframes height-out {
+  0% {
+    max-height: 300px;
+  }
+
+  100% {
+    max-height: 0px;
+  }
+}
+
+@keyframes height-out {
+  0% {
+    max-height: 300px;
+  }
+
+  100% {
+    max-height: 0px;
+  }
+}
+
+@-webkit-keyframes translate-in {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes translate-in {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@-webkit-keyframes translate-out {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(60%);
+  }
+}
+
+@keyframes translate-out {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(60%);
+  }
+}
+
 /* ########### BASE ############ */
 
 body:not(.wp-admin) {
@@ -1367,6 +1527,7 @@ button:focus {
   position: absolute;
   left: 0px;
   bottom: 0px;
+  z-index: 10;
   width: 100%;
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1376,6 +1537,28 @@ button:focus {
   padding-right: 4rem;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
+  display: block;
+}
+
+/* transition: all 0.5s;
+  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
+
+.search-module[mobile-closed] {
+  display: none;
+}
+
+.search-module[mobile-closing] {
+  /* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-out 800ms forwards ease-in; */
+  -webkit-animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
+          animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
+}
+
+.search-module[mobile-opened] {
+  -webkit-animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-in 600ms forwards ease-out;
+          animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-in 600ms forwards ease-out;
 }
 
 .search-module__wrapper-container {
@@ -1469,32 +1652,6 @@ button:focus {
   text-underline-offset: 4px;
 }
 
-.search-module {
-  display: block;
-  transition: all 0.5s;
-  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
-}
-
-.search-module[aria-hidden='true'] {
-  display: none;
-}
-
-.search-module-closed {
-  /* transition: all 0.3s ease-in-out; */
-  pointer-events: none;
-  --tw-translate-y: 50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  opacity: 0;
-  z-index: -1;
-}
-
-.search-module-open {
-  /* transition: all 0.3s ease-in-out; */
-  --tw-translate-y: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  z-index: 20;
-}
-
 .card-frequent-question {
   position: relative;
   border-radius: 1.5rem;
@@ -1663,12 +1820,16 @@ header#main-header {
   flex-direction: column-reverse;
 }
 
-@media (min-width: 782px) {
+@media (min-width: 960px) {
   header#main-header {
     flex-direction: column;
   }
 }
 
+.sub-menu {
+  z-index: 10;
+}
+
 .site-footer {
   margin-top: 3rem;
   display: grid;
@@ -1815,8 +1976,6 @@ article > *:not(.entry-content),
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
   padding-top: 2rem;
   padding-bottom: 2rem;
   padding-left: 4rem;
@@ -1826,13 +1985,14 @@ article > *:not(.entry-content),
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.menu-renovateur .logo {
+.menu-renovateur .website_logo {
+  order: 1;
   margin-right: 3rem;
   width: 190px;
 }
 
 @media (min-width: 1280px) {
-  .menu-renovateur .logo {
+  .menu-renovateur .website_logo {
     width: 222px;
   }
 }
@@ -1842,24 +2002,28 @@ article > *:not(.entry-content),
   } */
 
 .menu-renovateur__navlist {
+  position: relative;
   justify-content: center;
-  gap: 2rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
 }
 
-@media (min-width: 782px) {
+@media (min-width: 960px) {
   .menu-renovateur__navlist {
     display: flex;
   }
 }
 
-.menu-renovateur__navlist > li .page_icon {
+.menu-renovateur__navlist > .menu-item:hover > a, 
-  height: 50px;
+      .menu-renovateur__navlist > .menu-item:hover > button, 
-  width: 50px;
+      .menu-renovateur__navlist > .menu-item > a:focus, 
+      .menu-renovateur__navlist > .menu-item > button:focus {
+  background-color: rgb(239, 239, 239, 0.6);
+  --tw-text-opacity: 1;
+  color: rgb(223 30 30 / var(--tw-text-opacity));
 }
 
-.menu-renovateur__navlist > li {
+.menu-renovateur__navlist > .menu-item {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1869,7 +2033,7 @@ article > *:not(.entry-content),
 }
 
 @media (min-width: 960px) {
-  .menu-renovateur__navlist > li {
+  .menu-renovateur__navlist > .menu-item {
     position: relative;
   }
 }
@@ -1877,16 +2041,28 @@ article > *:not(.entry-content),
 /* Generic Submenu Item */
 
 .menu-renovateur__navlist .sub-menu {
-  position: absolute;
+  position: fixed;
-  bottom: 0px;
+  top: 0px;
+  z-index: 50;
+  min-height: 100vh;
+  width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  transform: translateY(100%);
-  width: 100vw;
-  max-width: 48rem;
   padding: 2rem;
 }
 
+@media (min-width: 960px) {
+  .menu-renovateur__navlist .sub-menu {
+    position: absolute;
+    min-height: 0px;
+    width: 100vw;
+    max-width: 48rem;
+    bottom: -31px;
+    transform: translateY(100%);
+    top: unset;
+  }
+}
+
 .menu-renovateur__navlist .sub-menu--closed {
   display: none;
 }
@@ -1897,22 +2073,18 @@ article > *:not(.entry-content),
 
 /* Conseils — Thamtiques Submenu Item */
 
-.menu-renovateur__navlist li#menu-item-168 hr {
-  margin-top: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.menu-renovateur__navlist li#menu-item-168 .sub-menu {
-  /* @apply hidden; */
-}
-
 .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
 }
 
-.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item {
+@media (min-width: 782px) {
+  .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item a {
   display: flex;
   gap: 1rem;
 }
@@ -1945,19 +2117,165 @@ article > *:not(.entry-content),
   text-underline-offset: 4px;
 }
 
-@media (min-width: 782px) {
+.menu-renovateur__navlist-container {
+  order: 3;
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .menu-renovateur__navlist-container {
+    order: 2;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .menu-renovateur__navlist-container {
+    overflow: hidden;
+  }
+
+  .menu-renovateur__navlist-container[opened] {
+    -webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+            animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+  }
+
+  .menu-renovateur__navlist-container[closing] {
+    -webkit-animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
+            animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
+  }
+
+  .menu-renovateur__navlist-container[closed] {
+    display: none;
+  }
+}
+
+.menu-renovateur__interaction_toggles {
+  order: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+@media (min-width: 960px) {
+  .menu-renovateur__interaction_toggles {
+    order: 3;
+  }
+}
+
+.menu-renovateur__mobile-menu-toggle {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (min-width: 960px) {
   .menu-renovateur__mobile-menu-toggle {
     display: none;
   }
 }
 
+.menu-renovateur__mobile-menu-toggle {
+  /* &:after {
+      @apply block w-8 h-8;
+      content: url('../resources/images/menu.svg');
+    } */
+}
+
+.menu-renovateur__mobile-menu-toggle .toggle-icon {
+  /* transform: translate(0, 7px); */
+  position: relative;
+  height: 1rem;
+  width: 1.5rem;
+  opacity: 0.8;
+}
+
+.menu-renovateur__mobile-menu-toggle .toggle-icon__bar {
+  position: absolute;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  height: 3px;
+}
+
+.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--top {
+  top: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--middle {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--bottom {
+  bottom: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon {
+  position: relative;
+}
+
+.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--top {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--middle {
+  opacity: 0;
+}
+
+.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--bottom {
+  top: 50%;
+  transform: translateY(-50%) rotate(-45deg);
+}
+
 .menu-renovateur__search-module-toggle {
-  z-index: 50;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
 }
 
+.menu-renovateur .menu-item .page_icon {
+  height: 50px;
+  width: 50px;
+}
+
+.menu-renovateur .menu-item__submenu-title {
+  margin-bottom: 1rem;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(118 117 117 / var(--tw-border-opacity));
+  padding-bottom: 1rem;
+}
+
+.menu-renovateur .menu-item__submenu-toggle, 
+    .menu-renovateur .menu-item > a {
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+}
+
+.menu-renovateur .menu-item__submenu-toggle {
+  text-align: left;
+}
+
+.menu-renovateur .menu-item__submenu-close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  height: auto;
+  border-radius: 9999px;
+  text-align: right;
+  outline-offset: 4px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 0;
+}
+
 .menu-renovateur--footer {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1992,6 +2310,7 @@ article > *:not(.entry-content),
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(47 1 84 / var(--tw-bg-opacity));
   padding-top: 1rem;
@@ -2064,40 +2383,13 @@ article > *:not(.entry-content),
   } */
 }
 
-.menu-homegrade__wrapper-container {
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  width: 100%;
-  max-width: 1440px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-}
-
-@media (min-width: 960px) {
-  .menu-homegrade__wrapper-container {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-}
-
-.menu-homegrade__wrapper-container {
-  /* li.menu-item.menu-item-has-children:hover {
-        @screen lg {
-          .menu-item-submenu-toggle:after {
-            transform: rotate(180deg);
-          }
-          .sub-menu {
-            display: block;
-          }
-        }
-      } */
-}
-
 /* submenus */
 
-.menu-homegrade__wrapper-container li .sub-menu {
+.menu-homegrade .sub-menu[open] {
+  display: block;
+}
+
+.menu-homegrade li .sub-menu {
   position: static;
   margin-left: auto;
   margin-right: auto;
@@ -2107,34 +2399,34 @@ article > *:not(.entry-content),
 }
 
 @media (min-width: 960px) {
-  .menu-homegrade__wrapper-container li .sub-menu {
+  .menu-homegrade li .sub-menu {
     position: absolute;
     margin-left: 0px;
     margin-right: 0px;
   }
 }
 
-.menu-homegrade__wrapper-container li .sub-menu {
+.menu-homegrade li .sub-menu {
   z-index: 999;
   display: none;
 }
 
-.menu-homegrade__wrapper-container li .sub-menu.sub-menu-open {
+/* &.sub-menu--open {
-  display: block;
+       display: block;
-}
+     } */
 
-.menu-homegrade__wrapper-container li .sub-menu li {
+.menu-homegrade li .sub-menu li {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
 @media (min-width: 960px) {
-  .menu-homegrade__wrapper-container li .sub-menu li {
+  .menu-homegrade li .sub-menu li {
     text-align: left;
   }
 }
 
-.menu-homegrade__wrapper-container li .sub-menu > a::after {
+.menu-homegrade li .sub-menu > a::after {
   transform: translateY(-2px) rotate(-90deg);
   content: '';
   display: inline-block;
@@ -2147,7 +2439,15 @@ article > *:not(.entry-content),
   transition: all 0.3s ease-out;
 }
 
+/* &__wrapper-container {
+  } */
+
 .menu-homegrade__navlist {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: 1440px;
+  justify-content: flex-end;
   padding-right: 0px;
 }
 
@@ -2193,18 +2493,18 @@ article > *:not(.entry-content),
 
 /* IF SUBMENU CHILD */
 
-.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:hover, 
+.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:hover, 
-        .menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:focus {
+        .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:focus {
   --tw-text-opacity: 1;
   color: rgb(223 30 30 / var(--tw-text-opacity));
 }
 
-.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle {
+.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle {
   position: relative;
   padding-right: 1rem;
 }
 
-.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:after {
+.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:after {
   right: 0px;
   content: '▼';
   position: absolute;
@@ -2220,11 +2520,11 @@ article > *:not(.entry-content),
   transition: all 0.3s ease-out;
 }
 
-.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='false']:after {
+.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='false']:after {
   transform: rotate(0deg);
 }
 
-.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='true']:after {
+.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='true']:after {
   transform: rotate(180deg);
 }
 
@@ -2293,6 +2593,26 @@ article > *:not(.entry-content),
   fill: #DF1E1E;
 }
 
+@media screen and (max-width: 960px) {
+  .menu-homegrade {
+    overflow: hidden;
+  }
+
+  .menu-homegrade[opened] {
+    -webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+            animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+  }
+
+  .menu-homegrade[closing] {
+    -webkit-animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
+            animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
+  }
+
+  .menu-homegrade[closed] {
+    display: none;
+  }
+}
+
 .menu-homegrade--header {
 }
 
@@ -2365,6 +2685,11 @@ article > *:not(.entry-content),
   }
 }
 
+.home-header {
+  isolation: isolate;
+  /* relative */
+}
+
 /* background-color: #fbfff5a6; */
 
 .home-header__titling {
@@ -2413,6 +2738,8 @@ article > *:not(.entry-content),
   /* cubic-bezier(0.18, 0.89, 0.3, 1); */
 }
 
+/* bg-red-100 */
+
 .home-header__fresque {
   width: 100%;
   z-index: -1;

header.php

@@ -25,7 +25,9 @@
 			<?php get_template_part('template-components/header/menu-homegrade'); ?>
 
 			<!-- MENU RENOVATEUR -->
-			<?php get_template_part('template-components/header/menu-renovateur'); ?>
+			<?php
+			get_template_part('template-components/header/menu-renovateur');
+			?>
 
 
 

includes/navwalker.php

@@ -6,13 +6,10 @@
 
 function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
-    // write_log($item);
-
-    // $item->classes = array_merge($item->classes, array('menu-item-' . $item->ID));
 
     // #### MENU HOMEGRADE HEADER
     if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) {
-        $output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
+        $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
     }
 
     // #### MENU HOMEGRADE FOOTER
@@ -21,12 +18,12 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
     }
 
 
-
+    // #### MENU RENOVATEUR
     if ($args->theme_location === "renovateur") {
         $page_icon = get_field('page_icon', $item->object_id);
 
         if (in_array('menu-item-has-children', $item->classes, true)) {
-            $output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
+            $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
         }
 
         // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
@@ -36,7 +33,6 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
             $output = $icon . $link;
         }
 
-        write_log($output);
 
         // #### TAXONOMY : GET ICON & INFOS ABOUT TAX
 
@@ -58,47 +54,3 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
     return $output;
 }
 add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
-
-/* -----------------------------------------------------------
-	Pass Specific submenus-classnames for menu renovateur
- -----------------------------------------------------------*/
-
-
-
-function customize_submenu_classnames($classes, $args, $depth)
-{
-    // Here we can additionally use menu arguments.
-    // if ($args->theme_location === "renovateur") {
-    // $default_class_name_key = array_search('sub-menu', $classes);
-
-    // if (false !== $default_class_name_key) {
-    //     unset($classes[$default_class_name_key]);
-    // }
-    // $classes[] = 'header-submenu';
-    // $classes[] = "depth-{$depth}";
-    // $classes[] = 'sub-menu';
-    // $classes[] = 'test';
-    // }
-    // write_log($classes);
-    // write_log($classes);
-
-    return $classes;
-}
-add_filter('nav_menu_submenu_css_class', 'customize_submenu_classnames', 10, 3);
-
-
-/* -----------------------------------------------------------
-	TEST
- -----------------------------------------------------------*/
-
-
-function wpdocs_unset_menu_items($menu_objects, $args)
-{
-
-    if ($args->theme_location === "renovateur") {
-        // write_log($args);
-        // write_log($menu_objects);
-        return $menu_objects;
-    }
-}
-add_filter('wp_nav_menu_objects', 'wpdocs_unset_menu_items', 10, 2);

js/app.js

@@ -2,63 +2,132 @@
   // resources/js/header.js
   function menuInit() {
     const header = document.querySelector("#main-header");
-    searchModule = header.querySelector(".search-module");
+    const searchModule = header.querySelector(".search-module");
     const searchModuleToggle = header.querySelector("#search-module-toggle");
-    const submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle");
+    const mobileMenuToggle = header.querySelector("#mobile-menu-toggle");
-    const submenusItems = header.querySelectorAll(".sub-menu");
+    const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
+    const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
     function isSubmenuOpen() {
       return header.querySelector("sub-menu-open") !== null;
     }
     function openSubmenu(buttonToggle) {
-      closeSubmenus();
       let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
       buttonToggle.setAttribute("aria-expanded", !isExpanded);
-      buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
+      buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--open");
+      buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed");
     }
     function closeSubmenus() {
-      const openSubmenus = header.querySelectorAll(".sub-menu-open");
+      const openSubmenus = header.querySelectorAll(".sub-menu--open");
       openSubmenus.forEach((submenu) => {
-        submenu.classList.remove("sub-menu-open");
+        submenu.classList.remove("sub-menu--open");
-        submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false");
+        submenu.classList.add("sub-menu--closed");
-        console.log(submenu.parentElement);
+        submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
       });
     }
+    function handleSubmenuToggle(buttonToggle) {
+      let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
+      if (!isExpanded) {
+        closeSubmenus();
+        openSubmenu(buttonToggle);
+      } else {
+        closeSubmenus();
+      }
+    }
+    function closeCurrentSubmenu(buttonClose) {
+      console.log("close submenu");
+      console.log(buttonClose.parentElement);
+      const currentOpenedSubmenu = buttonClose.parentElement;
+      currentOpenedSubmenu.classList.remove("sub-menu--open");
+      currentOpenedSubmenu.classList.add("sub-menu--closed");
+      currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
+    }
+    submenuToggles.forEach((button) => {
+      button.addEventListener("click", () => {
+        if (isSearchOpen() === true) {
+          closeSearch();
+        }
+        handleSubmenuToggle(button);
+      });
+    });
+    submenuCloseBtns.forEach((button) => {
+      button.addEventListener("click", () => closeCurrentSubmenu(button));
+    });
     function isSearchOpen() {
-      return searchModule.getAttribute("aria-hidden") === "true";
+      if (searchModule.getAttribute("mobile-closed") != null && searchModule.getAttribute("aria-hidden") != null && searchModule.getAttribute("mobile-opened") === null) {
+        return false;
+      }
+      if (searchModule.getAttribute("mobile-opened") != null && searchModule.getAttribute("mobile-closed") === null && searchModule.getAttribute("aria-hidden") === null) {
+        return true;
+      }
+      return null;
     }
     function openSearch() {
-      searchModule.classList.remove("search-module-open");
+      searchModuleToggle.setAttribute("aria-expanded", "");
-      searchModule.classList.add("search-module-closed");
+      searchModule.setAttribute("mobile-opened", "");
+      searchModule.removeAttribute("mobile-closed");
       setTimeout(() => {
-        searchModule.setAttribute("aria-hidden", "true");
+        searchModule.removeAttribute("aria-hidden");
       }, 400);
     }
     function closeSearch() {
-      searchModule.setAttribute("aria-hidden", "false");
+      searchModule.setAttribute("aria-hidden", "");
-      setTimeout(() => {
+      searchModule.removeAttribute("mobile-opened", "");
-        searchModule.classList.remove("search-module-closed");
+      searchModule.setAttribute("mobile-closing", "");
-        searchModule.classList.add("search-module-open");
+      searchModule.addEventListener("animationend", () => {
-      }, 50);
+        searchModule.setAttribute("mobile-closed", "");
+        searchModule.removeAttribute("mobile-closing", "");
+      }, { once: true });
       searchModuleToggle.toggleAttribute("aria-expanded");
     }
     searchModuleToggle.addEventListener("click", function(e) {
       closeSubmenus();
-      if (isSearchOpen()) {
+      if (isSearchOpen() === false) {
-        closeSearch();
+        openSearch();
         return;
       }
-      if (!isSearchOpen()) {
+      if (isSearchOpen() === true) {
-        openSearch();
+        closeSearch();
       }
     });
-    submenuToggles.forEach((button) => {
+    const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container");
-      button.addEventListener("click", () => openSubmenu(button));
+    const HomegradeNavListContainer = header.querySelector(".menu-homegrade");
+    function openMenu(menuContainer) {
+      menuContainer.removeAttribute("closed", "");
+      menuContainer.setAttribute("opened", "");
+      menuContainer.removeAttribute("aria-hidden", "");
+      menuContainer.setAttribute("opening", "");
+      menuContainer.addEventListener("animationend", () => {
+        menuContainer.removeAttribute("opening", "");
+      }, { once: true });
+    }
+    function closeMenu(menuContainer) {
+      menuContainer.removeAttribute("opened");
+      menuContainer.setAttribute("aria-hidden", "");
+      menuContainer.setAttribute("closing", "");
+      menuContainer.addEventListener("animationend", () => {
+        menuContainer.setAttribute("closed", "");
+        menuContainer.removeAttribute("closing", "");
+      }, { once: true });
+    }
+    mobileMenuToggle.addEventListener("click", function(e) {
+      const isNavOpened = renovateurNavListContainer.hasAttribute("opened");
+      const textContent = mobileMenuToggle.querySelector("span.text-content");
+      const dataTextOpen = mobileMenuToggle.getAttribute("data-text-open");
+      const dataTextClose = mobileMenuToggle.getAttribute("data-text-close");
+      textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
+      mobileMenuToggle.toggleAttribute("aria-expanded");
+      if (isNavOpened) {
+        closeMenu(renovateurNavListContainer);
+        closeMenu(HomegradeNavListContainer);
+      }
+      if (!isNavOpened) {
+        openMenu(renovateurNavListContainer);
+        openMenu(HomegradeNavListContainer);
+      }
     });
   }
 
   // resources/js/app.js
-  console.log("menuInit");
-  console.log("menuIniteeeee");
   window.addEventListener("load", function() {
     menuInit();
   });

resources/css/app.css

@@ -4,6 +4,7 @@
 
 /* ########### UTILITIES ############ */
 @import './utilities/shadows.css';
+@import './utilities/animation.css';
 
 /* ########### BASE ############ */
 @import './base/typography.css';

resources/css/components/search-module.css

@@ -2,11 +2,30 @@
   @apply w-full absolute  
 	bg-white
 	left-0 
-	bottom-0
 	px-16
 	py-6
+  z-10
+  bottom-0
 	transform translate-y-full;
 
+  @apply block;
+  /* transition: all 0.5s;
+  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
+
+  &[mobile-closed] {
+    @apply hidden;
+  }
+
+  &[mobile-closing] {
+    /* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-out 800ms forwards ease-in; */
+    animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
+  }
+  &[mobile-opened] {
+    animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-in 600ms forwards ease-out;
+  }
+
   &__wrapper-container {
     @apply max-w-screen-xl mx-auto;
   }
@@ -42,24 +61,3 @@
     }
   }
 }
-
-.search-module {
-  @apply block;
-  transition: all 0.5s;
-  transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
-}
-.search-module[aria-hidden='true'] {
-  @apply hidden;
-}
-
-.search-module-closed {
-  /* transition: all 0.3s ease-in-out; */
-  @apply transform translate-y-1/2 opacity-0 pointer-events-none;
-  z-index: -1;
-}
-.search-module-open {
-  /* transition: all 0.3s ease-in-out; */
-
-  @apply transform translate-y-full;
-  z-index: 20;
-}

resources/css/layout/header.css

@@ -1,6 +1,9 @@
 header#main-header {
   @apply flex 
 	flex-col-reverse
-	md:flex-col;
+	lg:flex-col;
 }
 
+.sub-menu {
+  @apply z-10;
+}

resources/css/layout/menu-homegrade.css

@@ -5,69 +5,54 @@
     bg-primary
     text-white
     relative
+    w-full
     h-fit
     py-4
     px-8 
     2xl:px-32
      my-0;
 
-  &__wrapper-container {
+  /* submenus */
-    @apply max-w-screen-2xl 
+  .sub-menu[open] {
-      w-full 
+    display: block;
-      mx-auto
+  }
-      flex 
+  li .sub-menu {
-      flex-col 
+    @apply bg-primary 
-      lg:flex-row 
+       p-6
-      items-center 
+       mx-auto
-      justify-around
+       lg:mx-0
-      lg:justify-end;
+       static
+       lg:absolute;
+    z-index: 999;
+    display: none;
 
-    /* li.menu-item.menu-item-has-children:hover {
+    /* &.sub-menu--open {
-        @screen lg {
+       display: block;
-          .menu-item-submenu-toggle:after {
+     } */
-            transform: rotate(180deg);
-          }
-          .sub-menu {
-            display: block;
-          }
-        }
-      } */
-    /* submenus */
-    li .sub-menu {
-      @apply bg-primary 
-        p-6
-        mx-auto
-        lg:mx-0
-        static
-        lg:absolute;
-      z-index: 999;
-      display: none;
 
-      &.sub-menu-open {
+    li {
-        display: block;
+      @apply py-2 lg:text-left;
-      }
+    }
 
-      li {
+    > a::after {
-        @apply py-2 lg:text-left;
+      transform: translateY(-2px) rotate(-90deg);
-      }
+      content: '';
-
+      display: inline-block;
-      > a::after {
+      height: 10px;
-        transform: translateY(-2px) rotate(-90deg);
+      width: 10px;
-        content: '';
+      margin-left: 20px;
-        display: inline-block;
+      background-image: url('../resources/img/arrow_down_white.svg');
-        height: 10px;
+      background-repeat: no-repeat;
-        width: 10px;
+      background-size: contain;
-        margin-left: 20px;
+      transition: all 0.3s ease-out;
-        background-image: url('../resources/img/arrow_down_white.svg');
-        background-repeat: no-repeat;
-        background-size: contain;
-        transition: all 0.3s ease-out;
-      }
     }
   }
+  /* &__wrapper-container {
+  } */
 
   &__navlist {
-    @apply lg:flex pr-0;
+    @apply w-full
+    max-w-screen-2xl mx-auto lg:flex justify-end pr-0;
 
     /* Highlight using list element */
     li.current-page-parent > a,
@@ -95,7 +80,7 @@
       }
 
       /* IF SUBMENU CHILD */
-      .menu-item-submenu-toggle {
+      .menu-item__submenu-toggle {
         &:hover,
         &:focus {
           @apply text-secondary;
@@ -117,10 +102,10 @@
           transition: all 0.3s ease-out;
         }
       }
-      .menu-item-submenu-toggle[aria-expanded='false']:after {
+      .menu-item__submenu-toggle[aria-expanded='false']:after {
         transform: rotate(0deg);
       }
-      .menu-item-submenu-toggle[aria-expanded='true']:after {
+      .menu-item__submenu-toggle[aria-expanded='true']:after {
         transform: rotate(180deg);
       }
     }
@@ -176,7 +161,19 @@
       }
     }
   }
+  @media screen and (max-width: 960px) {
+    @apply overflow-hidden;
 
+    &[opened] {
+      animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+    }
+    &[closing] {
+      animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
+    }
+    &[closed] {
+      @apply hidden;
+    }
+  }
   /*##### RESPONSIVE */
 
   /* @media (max-width: 960px) {

resources/css/layout/menu-renovateur.css

@@ -2,27 +2,35 @@
   @apply py-8 
   px-16
   relative
-  bg-yellow-50
    shadow-md 
    flex
    flex-wrap
    justify-between;
 
-  .logo {
+  .website_logo {
-    @apply mr-12 
+    @apply order-1 
+    mr-12 
 		w-[190px]
 		xl:w-[222px];
   }
   /* &__main-elements {
     @apply w-full bg-red-200 flex justify-between items-center;
   } */
-  &__navlist {
-    @apply md:flex justify-center gap-8 bg-green-200;
 
-    > li {
+  &__navlist {
-      .page_icon {
+    @apply lg:flex 
-        @apply w-[50px] h-[50px];
+    bg-fuchsia-300
+    justify-center
+    relative;
+
+    > .menu-item {
+      &:hover > a,
+      &:hover > button,
+      > a:focus,
+      > button:focus {
+        @apply text-secondary bg-gray;
       }
+
       @apply text-black
       flex
       lg:relative
@@ -32,9 +40,24 @@
     }
     /* Generic Submenu Item */
     .sub-menu {
-      @apply absolute bottom-0   bg-white;
+      @apply fixed
-      transform: translateY(100%);
+    bg-white
-      @apply max-w-3xl w-screen p-8;
+      z-50
+      top-0
+      min-h-screen
+      w-full 
+      p-8
+      lg:absolute
+      lg:min-h-0
+      lg:w-screen
+      lg:max-w-3xl;
+
+      @screen lg {
+        bottom: -31px;
+        transform: translateY(100%);
+        top: unset;
+      }
+
       &--closed {
         @apply hidden;
       }
@@ -45,15 +68,9 @@
 
     /* Conseils — Thamtiques Submenu Item */
     li#menu-item-168 {
-      hr {
-        @apply my-3 mb-6;
-      }
-      .sub-menu {
-        /* @apply hidden; */
-      }
       .sub-menu__navlist {
-        @apply grid grid-cols-2 gap-4;
+        @apply grid md:grid-cols-2 gap-4;
-        &__item {
+        &__item a {
           @apply flex gap-4;
         }
 
@@ -80,11 +97,101 @@
       }
     }
   }
+  &__navlist-container {
+    @apply /* bg-white */
+    order-3 
+    lg:order-2
+    w-full
+    lg:w-fit;
+  }
+
+  @media screen and (max-width: 960px) {
+    &__navlist-container {
+      @apply overflow-hidden;
+    }
+
+    &__navlist-container[opened] {
+      animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
+    }
+    &__navlist-container[closing] {
+      animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
+    }
+    &__navlist-container[closed] {
+      @apply hidden;
+    }
+  }
+
+  &__interaction_toggles {
+    @apply order-2 lg:order-3 flex items-center justify-start gap-4;
+  }
   &__mobile-menu-toggle {
-    @apply md:hidden;
+    @apply lg:hidden flex items-center gap-4;
+    .toggle-icon {
+      /* transform: translate(0, 7px); */
+      @apply w-6 h-4 relative opacity-80;
+      &__bar {
+        @apply bg-black w-full absolute;
+
+        height: 3px;
+      }
+      &__bar--top {
+        top: 0;
+        transition: all 0.3s ease-in-out;
+      }
+      &__bar--middle {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      &__bar--bottom {
+        bottom: 0;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+
+    /* &:after {
+      @apply block w-8 h-8;
+      content: url('../resources/images/menu.svg');
+    } */
+  }
+  &__mobile-menu-toggle[aria-expanded] {
+    .toggle-icon {
+      @apply relative;
+      &__bar--top {
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+      }
+      &__bar--middle {
+        opacity: 0;
+      }
+      &__bar--bottom {
+        top: 50%;
+        transform: translateY(-50%) rotate(-45deg);
+      }
+    }
   }
   &__search-module-toggle {
-    @apply z-50 h-fit;
+    @apply h-fit;
+  }
+
+  .menu-item {
+    .page_icon {
+      @apply w-[50px] h-[50px];
+    }
+    &__submenu-title {
+      @apply pb-4 mb-4 border-b border-gray-dark;
+    }
+    &__submenu-toggle,
+    > a {
+      @apply p-6  rounded-3xl;
+    }
+    &__submenu-toggle {
+      @apply text-left;
+    }
+    &__submenu-close {
+      @apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
+      width: fit-content;
+      padding: 0;
+    }
   }
 }
 

resources/css/utilities/animation.css

@@ -0,0 +1,67 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(-80%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+@keyframes slide-out {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes height-in {
+  0% {
+    max-height: 0px;
+  }
+  100% {
+    max-height: 300px;
+  }
+}
+@keyframes height-out {
+  0% {
+    max-height: 300px;
+  }
+  100% {
+    max-height: 0px;
+  }
+}
+
+@keyframes translate-in {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+@keyframes translate-out {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(60%);
+  }
+}

resources/img/graphic-assets/close_submenu_icon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
+  <g id="Groupe_1505" data-name="Groupe 1505" transform="translate(-953 -6187)">
+    <g id="Groupe_1477" data-name="Groupe 1477">
+      <g id="Ellipse_225" data-name="Ellipse 225" transform="translate(953 6187)" fill="#fff" stroke="#000" stroke-width="2">
+        <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+        <circle cx="13.5" cy="13.5" r="12.5" fill="none"/>
+      </g>
+      <path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.773,6207.279l8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+    </g>
+    <path id="Tracé_3612" data-name="Tracé 3612" d="M-3931.864,6207.279l-8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+  </g>
+</svg>

resources/js/app.js

@@ -1,6 +1,5 @@
 import menuInit from './header';
-console.log('menuInit');
+
-console.log('menuIniteeeee');
 window.addEventListener('load', function () {
   menuInit();
 });

resources/js/header.js

@@ -2,109 +2,212 @@ export default function menuInit() {
   const header = document.querySelector('#main-header');
 
   // Search module
-  searchModule = header.querySelector('.search-module');
+  const searchModule = header.querySelector('.search-module');
   const searchModuleToggle = header.querySelector('#search-module-toggle');
 
-  // Submenus
+  // Mobile Menu
-  const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
+  const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
-  const submenusItems = header.querySelectorAll('.sub-menu');
+
+  /* -----------------------------------------------------------
+	HANDLE SUBMENUS
+ -----------------------------------------------------------*/
+  // SubmenusToggles
+  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
+  const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
 
   function isSubmenuOpen() {
     return header.querySelector('sub-menu-open') !== null;
   }
 
   function openSubmenu(buttonToggle) {
-    closeSubmenus();
     let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
     buttonToggle.setAttribute('aria-expanded', !isExpanded);
-    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
+    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
+    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
   }
   function closeSubmenus() {
-    const openSubmenus = header.querySelectorAll('.sub-menu-open');
+    const openSubmenus = header.querySelectorAll('.sub-menu--open');
     openSubmenus.forEach((submenu) => {
-      submenu.classList.remove('sub-menu-open');
+      submenu.classList.remove('sub-menu--open');
+      submenu.classList.add('sub-menu--closed');
       submenu.parentElement
-        .querySelector('.menu-item-submenu-toggle')
+        .querySelector('.menu-item__submenu-toggle')
         .setAttribute('aria-expanded', 'false');
-      console.log(submenu.parentElement);
     });
   }
 
+  function handleSubmenuToggle(buttonToggle) {
+    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
+    if (!isExpanded) {
+      closeSubmenus();
+      openSubmenu(buttonToggle);
+    } else {
+      closeSubmenus();
+    }
+  }
 
+  function closeCurrentSubmenu(buttonClose) {
+    console.log('close submenu');
+    console.log(buttonClose.parentElement);
+    const currentOpenedSubmenu = buttonClose.parentElement;
+
+    currentOpenedSubmenu.classList.remove('sub-menu--open');
+    currentOpenedSubmenu.classList.add('sub-menu--closed');
+    currentOpenedSubmenu.parentElement
+      .querySelector('.menu-item__submenu-toggle')
+      .setAttribute('aria-expanded', 'false');
+  }
+  // SUBMENU TOGGGLES open/close
+  submenuToggles.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (isSearchOpen() === true) {
+        closeSearch();
+      }
+      handleSubmenuToggle(button);
+      // closeSearch();
+    });
+  });
+
+  submenuCloseBtns.forEach((button) => {
+    button.addEventListener('click', () => closeCurrentSubmenu(button));
+  });
+
+  /* -----------------------------------------------------------
+	HANDLE SEARCH
+ -----------------------------------------------------------*/
   function isSearchOpen() {
-    return searchModule.getAttribute('aria-hidden') === 'true';
+    // IF CLOSED
+    if (
+      searchModule.getAttribute('mobile-closed') != null &&
+      searchModule.getAttribute('aria-hidden') != null &&
+      searchModule.getAttribute('mobile-opened') === null
+    ) {
+      return false;
+    }
+
+    // IF OPENED
+    if (
+      searchModule.getAttribute('mobile-opened') != null &&
+      searchModule.getAttribute('mobile-closed') === null &&
+      searchModule.getAttribute('aria-hidden') === null
+    ) {
+      return true;
+    }
+    // IF TRANSITIONNING OR PROBLEM
+    return null;
   }
   function openSearch() {
-    searchModule.classList.remove('search-module-open');
+    searchModuleToggle.setAttribute('aria-expanded', '');
-    searchModule.classList.add('search-module-closed');
+    searchModule.setAttribute('mobile-opened', '');
+    searchModule.removeAttribute('mobile-closed');
     setTimeout(() => {
-      searchModule.setAttribute('aria-hidden', 'true');
+      searchModule.removeAttribute('aria-hidden');
     }, 400);
   }
   function closeSearch() {
-    searchModule.setAttribute('aria-hidden', 'false');
+    searchModule.setAttribute('aria-hidden', '');
+    searchModule.removeAttribute('mobile-opened', '');
 
-    setTimeout(() => {
+    searchModule.setAttribute('mobile-closing', '');
-      searchModule.classList.remove('search-module-closed');
+
-      searchModule.classList.add('search-module-open');
+    searchModule.addEventListener(
-    }, 50);
+      'animationend',
+      () => {
+        searchModule.setAttribute('mobile-closed', '');
+        searchModule.removeAttribute('mobile-closing', '');
+      },
+      { once: true }
+    );
+    // setTimeout(() => {
+    //   searchModule.setAttribute('mobile-closed', '');
+    //   searchModule.removeAttribute('mobile-opened', '');
+    // }, 50);
 
     searchModuleToggle.toggleAttribute('aria-expanded');
   }
 
   // SEARCH TOGGLE open/close
   searchModuleToggle.addEventListener('click', function (e) {
-    // const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
     closeSubmenus();
-    // MENU IS OPEN --> CLOSE IT
+
-    if (isSearchOpen()) {
+    // SEARCH IS CLOSED --> OPEN IT
-      closeSearch();
+    if (isSearchOpen() === false) {
+      openSearch();
       return;
     }
-    // MENU IS CLOSED --> OPEN IT
+
-    if (!isSearchOpen()) {
+    // SEARCH IS OPEN --> CLOSE IT
-      openSearch();
+    if (isSearchOpen() === true) {
+      closeSearch();
     }
   });
 
-  // SEARCH TOGGLE open/close
+  /* -----------------------------------------------------------
-  submenuToggles.forEach((button) => {
+	HANDLE MOBILE
-    button.addEventListener('click', () => openSubmenu(button));
+ -----------------------------------------------------------*/
+  const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
+  const HomegradeNavListContainer = header.querySelector('.menu-homegrade');
+
+  function openMenu(menuContainer) {
+    // header.removeAttribute('closed', '');
+    // header.setAttribute('opened', '');
+    // header.removeAttribute('aria-hidden', '');
+    // header.setAttribute('opening', '');
+
+    // RENOVATEUR
+    menuContainer.removeAttribute('closed', '');
+    menuContainer.setAttribute('opened', '');
+    menuContainer.removeAttribute('aria-hidden', '');
+    menuContainer.setAttribute('opening', '');
+
+    menuContainer.addEventListener(
+      'animationend',
+      () => {
+        menuContainer.removeAttribute('opening', '');
+      },
+      { once: true }
+    );
+  }
+  function closeMenu(menuContainer) {
+    // header.removeAttribute('opened');
+    // header.setAttribute('aria-hidden', '');
+    // header.setAttribute('closing', '');
+
+    menuContainer.removeAttribute('opened');
+    menuContainer.setAttribute('aria-hidden', '');
+    menuContainer.setAttribute('closing', '');
+
+    menuContainer.addEventListener(
+      'animationend',
+      () => {
+        menuContainer.setAttribute('closed', '');
+        menuContainer.removeAttribute('closing', '');
+      },
+      { once: true }
+    );
+  }
+  mobileMenuToggle.addEventListener('click', function (e) {
+    const isNavOpened = renovateurNavListContainer.hasAttribute('opened');
+
+    // Button Text Content
+    const textContent = mobileMenuToggle.querySelector('span.text-content');
+    const dataTextOpen = mobileMenuToggle.getAttribute('data-text-open');
+    const dataTextClose = mobileMenuToggle.getAttribute('data-text-close');
+
+    // Change Text button
+    textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
+
+    // Toggle Aria-expanded
+    mobileMenuToggle.toggleAttribute('aria-expanded');
+
+    // Handle Visibility
+    if (isNavOpened) {
+      closeMenu(renovateurNavListContainer);
+      closeMenu(HomegradeNavListContainer);
+    }
+    if (!isNavOpened) {
+      openMenu(renovateurNavListContainer);
+      openMenu(HomegradeNavListContainer);
+    }
   });
-
-  // #### BURGER TOGGLE open/close
-  // const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
-  // burgerMenuToggle.addEventListener('click', function (e) {
-  //   e.preventDefault();
-  //   header.classList.toggle('nav-open');
-  //   burgerMenuToggle.toggleAttribute('aria-expanded');
-  //   gsap.from(primary_menu, {
-  //     opacity: 20,
-  //     y: '-100vh',
-  //     duration: 0.5,
-  //     ease: Power4.easeOut,
-  //   });
-  // });
-
-  // #### SUBMENUS TOGGLE open/close
-  // const submenuToggles = primary_menu.querySelectorAll(
-  //   '.menu-item-submenu-toggle'
-  // );
-
-  // #### Close nav when reaching the end of the menu with tab
-
-  // document.addEventListener(
-  //   'focusin',
-  //   (e) => {
-  //     const header = document.querySelector('#primary-header');
-  //     console.log(header.contains(document.activeElement));
-  //     if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
-  //       header.classList.remove('nav-open');
-  //       burgerMenuToggle.setAttribute('aria-expanded', false);
-
-  //       burgerMenuToggle.focus();
-  //     }
-  //   },
-  //   true
-  // );
 }

style.css

@@ -3,5 +3,5 @@ Theme Name: Homegrade_Theme
 Author: Deligraph
 Author URI: https://deligraph.com/
 Version: 1.0.0
-
+Text Domain: homegrade-theme__texte-fonctionnel
 */

template-blocks/home/home-header/home-header.css

@@ -1,8 +1,10 @@
 .home-header {
   @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 
-  mb-24 
+  mb-24;
-   /* relative */
+  isolation: isolate;
-  /* bg-red-100 */;
+
+  /* relative */
+  /* bg-red-100 */
   /* aspect-ratio: 1.5; */
 
   /* min-height: 80vh; */

template-blocks/home/show-thematiques/show-thematiques.js

@@ -1,8 +1,5 @@
 window.addEventListener('DOMContentLoaded', (event) => {
-  const cardThematiques = document.querySelectorAll(
+  const cardThematiques = document.querySelectorAll('.swiper-slide  .card-thematique');
-    '.swiper-slide  .card-thematique'
-  );
-  console.log(`cardThematiques`, cardThematiques);
 
   mySwiper = new Swiper('.swiper-container', {
     grabCursor: false,
@@ -21,10 +18,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
       el: '.swiper-pagination',
       clickable: true,
       renderBullet: function (index, className) {
-        const ariaLabel =
+        const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy');
-          cardThematiques[index].getAttribute(
-            'data-taxonomy'
-          );
 
         return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
       },

template-components/header/menu-homegrade.php

@@ -2,25 +2,19 @@
 
 ?>
 
-<nav class="menu-homegrade menu-homegrade--header">
+<nav class="menu-homegrade menu-homegrade--header" closed>
-	<div class="menu-homegrade__wrapper-container">
+	<!-- <div class="menu-homegrade__wrapper-container"> -->
 
-		<button class="menu-homegrade__burger-menu-toggle" aria-label="<?php echo esc_html_e("Ouvrir le menu", 'deligraph-theme') ?>">
+	<?php
-			<div class="menu-toggle-bar menu-toggle-bar--top"></div>
+	wp_nav_menu(
-			<div class="menu-toggle-bar menu-toggle-bar--middle"></div>
+		array(
-			<div class="menu-toggle-bar menu-toggle-bar--bottom"></div>
+			'container'    => 'false',
-			<!-- <?php echo get_template_part('resources/svg/burger-menu-icon.svg'); ?> -->
+			'theme_location'  => 'homegrade',
-		</button>
+			'li_class'        => 'menu-navlink',
-		<?php
+			'fallback_cb'     => false,
-		wp_nav_menu(
+			'menu_class' => 'menu-homegrade-header menu-homegrade__navlist',
-			array(
+			'menu_id' => 'menu-homegrade-navlist',
-				'container'    => 'false',
-				'theme_location'  => 'homegrade',
-				'li_class'        => 'menu-navlink',
-				'fallback_cb'     => false,
-				'menu_class' => 'menu-homegrade-header menu-homegrade__navlist',
-				'menu_id' => 'menu-homegrade-navlist',
 
-			)
+		)
-		); ?>
+	); ?>
 </nav>

template-components/header/menu-renovateur.php

@@ -7,16 +7,8 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
 // print_r($menuitems);
 // echo '</pre>';
 ?>
-<!-- MENU RENOV NEW -->
 
 
-
-
-
-
-
-<!-- MENU RENOV ANCIEN -->
-
 <div class="menu-renovateur">
 
 	<div class="website_logo">
@@ -36,117 +28,142 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
 
 
 	</div>
+	<div class="menu-renovateur__interaction_toggles">
+		<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="search-module">
+			<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
+		</button>
+		<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="menu-renovateur-navlist-container">
+			<span class="text-content">
+				<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>
+			</span>
+			<div class="toggle-icon">
+				<div class="toggle-icon__bar toggle-icon__bar--top"></div>
+				<div class="toggle-icon__bar toggle-icon__bar--middle"></div>
+				<div class="toggle-icon__bar toggle-icon__bar--bottom"></div>
+			</div>
 
-	<ul id="menu-menu-renovateur" class="menu-renovateur__navlist">
+		</button>
-		<?php
+	</div>
-		$count = 0;
+	<div id="menu-renovateur-navlist-container" class="menu-renovateur__navlist-container" closed>
-		$submenu = false;
-
-		foreach ($menuitems as $key => $item) :
-			// write_log("item");
-			// write_log($item);
-			$link = $item->url;
-			$title = $item->title;
-			// item does not have a parent so menu_item_parent equals 0 (false)
-		?>
 
+		<ul id="menu-menu-renovateur" class="menu-renovateur__navlist mobile-navlist">
 			<?php
-			/* -----------------------------------------------------------
+			$count = 0;
-		IF NOT A SUBMENU
+			$submenu = false;
-		-----------------------------------------------------------*/
-			if (!$item->menu_item_parent) : ?>
-				<?php $parent_id = $item->ID; ?>
-
-				<!-- HAS SUBMENU -->
-				<?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
-					<li id="menu-item-<?php echo $item->ID ?>" class="menu-item-has-children">
-						<button>
-							<?php echo $title; ?>
-						</button>
-
-						<!-- NO SUBMENU -->
-					<?php else : ?>
-					<li id="menu-item-<?php echo $item->ID ?>">
-
-						<a href=" <?php echo $link; ?>" class="title">
-							<?php echo $title; ?>
-						</a>
-					<?php endif; ?>
 
 
-				<?php endif; ?>
+			foreach ($menuitems as $key => $item) :
+				// write_log("item");
+				// write_log($item);
+				$link = $item->url;
+				$title = $item->title;
+				$pageIcon = get_field('page_icon', $object->ID);
+				// echo '<pre>';
+				// print_r($item);
+				// print_r($pageIcon);
+				// echo '</pre>';
+				// item does not have a parent so menu_item_parent equals 0 (false)
+			?>
 
 				<?php
 				/* -----------------------------------------------------------
+		IF NOT A SUBMENU
+		-----------------------------------------------------------*/
+				if (!$item->menu_item_parent) : ?>
+					<?php $parent_id = $item->ID; ?>
+
+					<!-- HAS SUBMENU -->
+					<?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
+						<li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children">
+							<button type="button" class="menu-item__submenu-toggle" aria-expanded="false">
+								<?php echo $title; ?>
+							</button>
+
+							<!-- HAS NO SUBMENU -->
+						<?php else : ?>
+						<li id="menu-item-<?php echo $item->ID ?>" class="menu-item ">
+
+							<a href=" <?php echo $link; ?>" class="title">
+								<?php echo $title; ?>
+							</a>
+						<?php endif; ?>
+
+
+					<?php endif; ?>
+
+					<?php
+					/* -----------------------------------------------------------
 			IF IS A SUBMENU
 			-----------------------------------------------------------*/
-				write_log($item);
+					// write_log($item);
-				// echo '<pre>';
+					// echo '<pre>';
-				// print_r(168);
+					// print_r(168);
-				// print_r(gettype($item->ID));
+					// print_r(gettype($item->ID));
-				// echo '</pre>';
+					// echo '</pre>';
-				if ($parent_id == $item->menu_item_parent) : ?>
+					if ($parent_id == $item->menu_item_parent) : ?>
-					<?php if (!$submenu) : $submenu = true; ?>
+						<?php if (!$submenu) : $submenu = true; ?>
-						<div class="sub-menu sub-menu--closed">
+							<div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
-							<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
-							if ($item->menu_item_parent === "168") : ?>
-								<h5>Découvrez nos conseils par thématique</h5>
-								<hr>
-							<?php endif; ?>
-							<?php /* AIDES FINANCIERES SUBMENU TITLE */
-							if ($item->menu_item_parent === "169") : ?>
-								<h5>Quelles sont les aides financières disponibles pour votre logement ?</h5>
-								<hr>
-							<?php endif; ?>
 
-							<ul class="sub-menu__navlist">
+								<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="submenu-<?php echo $item->menu_item_parent ?>">
-							<?php endif; ?>
+									<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
-
+								</button>
-							<li class="sub-menu__navlist__item">
+								<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
-								<?php
+								if ($item->menu_item_parent === "168") : ?>
-								// #### IF IS TAXONOMY SUB-ITEM
+									<h5 class="menu-item__submenu-title">Découvrez nos conseils par thématique</h5>
-								if ($item->type === "taxonomy") :
-									$term = get_term_by('id', $item->object_id, 'thematiques');
-									$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
-								?>
-									<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
-									<div class="details">
-										<h6><?php echo $title; ?></h6>
-										<p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
-									</div>
-								<?php else : ?>
-
-									<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
 								<?php endif; ?>
-							</li>
+								<?php /* AIDES FINANCIERES SUBMENU TITLE */
+								if ($item->menu_item_parent === "169") : ?>
+									<h5 class="menu-item__submenu-title">Quelles sont les aides financières disponibles pour votre logement ?</h5>
 
-							<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id && $submenu) : ?>
+								<?php endif; ?>
-							</ul>
+
-						</div>
+								<ul class="sub-menu__navlist">
+								<?php endif; ?>
+
+								<li class="submenu-item sub-menu__navlist__item">
+
+									<?php
+									// #### IF IS TAXONOMY SUB-ITEM
+									if ($item->type === "taxonomy") :
+
+										$term = get_term_by('id', $item->object_id, 'thematiques');
+										$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
+
+									?>
+										<a href="<?php echo get_term_link($term) ?>">
+											<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
+											<div class="details">
+												<h6><?php echo $title; ?></h6>
+												<p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
+											</div>
+										</a>
+									<?php else : ?>
+
+										<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
+									<?php endif; ?>
+								</li>
+
+								<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id && $submenu) : ?>
+								</ul>
+							</div>
+						<?php $submenu = false;
+								endif; ?>
+
+					<?php endif; ?>
+
+					<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id) : ?>
+						</li>
 					<?php $submenu = false;
-							endif; ?>
+					endif; ?>
 
-				<?php endif; ?>
+				<?php $count++;
+			endforeach; ?>
 
-				<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id) : ?>
+		</ul>
-					</li>
+	</div>
-				<?php $submenu = false;
-				endif; ?>
-
-			<?php $count++;
-		endforeach; ?>
-
-	</ul>
 
 
 
-	<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
-		<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
-	</button>
-	<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button">
-		Menu
-	</button>
-
 
 	<!-- SEARCH MODULE -->
 	<?php get_template_part('template-components/header/search-module'); ?>

template-components/header/search-module.php

@@ -2,7 +2,7 @@
 
 ?>
 
-<div class="search-module search-module-closed" aria-hidden="true">
+<div id="search-module" class="search-module" mobile-closed aria-hidden role="search">
 	<div class="search-module__wrapper-container">
 		<?php get_search_form(); ?>
 		<div class="search-module__suggestions">