advancing on menu

css/app.css

@@ -1837,21 +1837,11 @@ article > *:not(.entry-content),
   }
 }
 
-.menu-renovateur__main-elements {
+/* &__main-elements {
-  display: flex;
+    @apply w-full bg-red-200 flex justify-between items-center;
-  width: 100%;
+  } */
-  align-items: center;
-  justify-content: space-between;
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
 
 .menu-renovateur__navlist {
-  left: 50%;
-  top: 50%;
-  --tw-translate-x: -50%;
-  --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));
   justify-content: center;
   gap: 2rem;
   --tw-bg-opacity: 1;
@@ -1860,17 +1850,16 @@ article > *:not(.entry-content),
 
 @media (min-width: 782px) {
   .menu-renovateur__navlist {
-    position: absolute;
     display: flex;
   }
 }
 
-.menu-renovateur__navlist li .page_icon {
+.menu-renovateur__navlist > li .page_icon {
   height: 50px;
   width: 50px;
 }
 
-.menu-renovateur__navlist li {
+.menu-renovateur__navlist > li {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1879,10 +1868,83 @@ article > *:not(.entry-content),
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.menu-renovateur__navlist li .sub-menu {
+@media (min-width: 960px) {
+  .menu-renovateur__navlist > li {
+    position: relative;
+  }
+}
+
+/* Generic Submenu Item */
+
+.menu-renovateur__navlist .sub-menu {
+  position: absolute;
+  bottom: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  transform: translateY(100%);
+  width: 100vw;
+  max-width: 48rem;
+  padding: 2rem;
+}
+
+.menu-renovateur__navlist .sub-menu--closed {
   display: none;
 }
 
+.menu-renovateur__navlist .sub-menu--open {
+  display: block;
+}
+
+/* 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 {
+  display: flex;
+  gap: 1rem;
+}
+
+.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__thematique-icon {
+  max-width: 80px;
+}
+
+.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+/* Conseils — Thamtiques Submenu Item */
+
+.menu-renovateur__navlist li#menu-item-169 .sub-menu {
+  /* @apply hidden; */
+}
+
+.menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist li {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  text-underline-offset: 4px;
+}
+
 @media (min-width: 782px) {
   .menu-renovateur__mobile-menu-toggle {
     display: none;
@@ -2281,7 +2343,6 @@ article > *:not(.entry-content),
 /* Home */
 
 .home-header {
-  position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 6rem;
@@ -2346,10 +2407,8 @@ article > *:not(.entry-content),
 }
 
 .home-header__scroll-down-indicator__arrow {
-  -webkit-animation: bouncingArrow 1s infinite alternate
+  -webkit-animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
-        cubic-bezier(0.01, 0.61, 0.67, 0.99);
+          animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
-          animation: bouncingArrow 1s infinite alternate
-        cubic-bezier(0.01, 0.61, 0.67, 0.99);
   /* cubic-bezier(0.01, 0.61, 0.39, 1); */
   /* cubic-bezier(0.18, 0.89, 0.3, 1); */
 }

includes/navwalker.php

@@ -6,6 +6,9 @@
 
 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)) {
@@ -15,24 +18,38 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
     // #### MENU HOMEGRADE FOOTER
     if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-footer" && in_array('menu-item-has-children', $item->classes, true)) {
         $output = '<h6 class="page-group-title">' . $item->title . '</h6>';
-        write_log("YOOO ITEM");
-        write_log($item);
     }
 
+
+
     if ($args->theme_location === "renovateur") {
         $page_icon = get_field('page_icon', $item->object_id);
 
-        // write_log($item);
         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>';
         }
 
-        if (isset($page_icon['url'])) {
+        // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
-            write_log($page_icon['url']);
+        if (isset($page_icon)) {
             $icon = '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>';
             $link = $output;
             $output = $icon . $link;
         }
+
+        write_log($output);
+    
+        // #### TAXONOMY : GET ICON & INFOS ABOUT TAX
+
+        if ($item->type === "taxonomy") {
+            $term = get_term_by('id', $item->object_id, 'thematiques');
+            $cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
+
+            $output = '<a class="lol" href="' . $item->url . '">';
+            $output .= '<img class="thematique-icon" src="' . $cover['icon']['url'] .  '"/>';
+            $output .=  '<h6>' . $item->title . "</h6>";
+            $output .=  '<p>' . $term->description . "</p>";
+            $output .= "</a>";
+        }
     }
 
     if ($args->theme_location === "footer" && in_array('menu-item-has-children', $item->classes, true)) {
@@ -41,3 +58,47 @@ 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);

resources/css/layout/menu-renovateur.css

@@ -13,26 +13,71 @@
 		w-[190px]
 		xl:w-[222px];
   }
-  &__main-elements {
+  /* &__main-elements {
     @apply w-full bg-red-200 flex justify-between items-center;
-  }
+  } */
   &__navlist {
-    @apply md:absolute md:flex justify-center gap-8 bg-green-200
+    @apply md:flex justify-center gap-8 bg-green-200;
-    left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2;
 
-    li {
+    > li {
       .page_icon {
         @apply w-[50px] h-[50px];
       }
       @apply text-black
       flex
+      lg:relative
       justify-center
       items-center
       font-bold;
-
+    }
-      .sub-menu {
+    /* Generic Submenu Item */
+    .sub-menu {
+      @apply absolute bottom-0   bg-white;
+      transform: translateY(100%);
+      @apply max-w-3xl w-screen p-8;
+      &--closed {
         @apply hidden;
       }
+      &--open {
+        @apply block;
+      }
+    }
+
+    /* 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;
+        &__item {
+          @apply flex gap-4;
+        }
+
+        &__thematique-icon {
+          max-width: 80px;
+        }
+        &__description {
+          @apply text-sm font-normal;
+          line-height: 1.3;
+        }
+      }
+    }
+    /* Conseils — Thamtiques Submenu Item */
+    li#menu-item-169 {
+      .sub-menu {
+        /* @apply hidden; */
+      }
+
+      .sub-menu__navlist {
+        @apply flex gap-5;
+        li {
+          @apply underline underline-offset-4;
+        }
+      }
     }
   }
   &__mobile-menu-toggle {

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

@@ -1,7 +1,7 @@
 .home-header {
   @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 
   mb-24 
-   relative
+   /* relative */
   /* bg-red-100 */;
   /* aspect-ratio: 1.5; */
 
@@ -25,8 +25,7 @@
     width: 80px;
     height: 80px;
     &__arrow {
-      animation: bouncingArrow 1s infinite alternate
+      animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
-        cubic-bezier(0.01, 0.61, 0.67, 0.99);
       /* cubic-bezier(0.01, 0.61, 0.39, 1); */
       /* cubic-bezier(0.18, 0.89, 0.3, 1); */
     }

template-components/header/menu-renovateur.php

@@ -1,38 +1,146 @@
 <?php
-
+$menu_name = 'renovateur';
+$locations = get_nav_menu_locations();
+$menu = wp_get_nav_menu_object($locations[$menu_name]);
+$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
+// echo '<pre>';
+// print_r($menuitems);
+// echo '</pre>';
 ?>
+<!-- MENU RENOV NEW -->
+
+
+
+
+
+
+
+<!-- MENU RENOV ANCIEN -->
+
 <div class="menu-renovateur">
 
 	<div class="website_logo">
 		<?php if (has_custom_logo()) { ?>
-		<?php the_custom_logo(); ?>
+			<?php the_custom_logo(); ?>
 		<?php } else { ?>
-		<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
+			<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
-			<?php echo get_bloginfo('name'); ?>
+				<?php echo get_bloginfo('name'); ?>
-		</a>
+			</a>
 
-		<p class="text-sm font-light text-gray-600">
+			<p class="text-sm font-light text-gray-600">
-			<?php echo get_bloginfo('description'); ?>
+				<?php echo get_bloginfo('description'); ?>
-		</p>
+			</p>
 
 		<?php } ?>
 
 
 
 	</div>
-	<?php
-	wp_nav_menu(
-		array(
-			'container'    => 'false',
-			'theme_location'  => 'renovateur',
-			'li_class'        => 'menu-navlink',
-			'fallback_cb'     => false,
-			'menu_class'     => "menu-renovateur__navlist",
-		)
-	); ?>
 
-	<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") ?>"
+	<ul id="menu-menu-renovateur" class="menu-renovateur__navlist">
-		href="<?php echo $social_networks['facebook_profile_url'] ?>">
+		<?php
+		$count = 0;
+		$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)
+		?>
+
+			<?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-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; ?>
+
+				<?php
+				/* -----------------------------------------------------------
+			IF IS A SUBMENU
+			-----------------------------------------------------------*/
+				write_log($item);
+				// echo '<pre>';
+				// print_r(168);
+				// print_r(gettype($item->ID));
+				// echo '</pre>';
+				if ($parent_id == $item->menu_item_parent) : ?>
+					<?php if (!$submenu) : $submenu = true; ?>
+						<div class="sub-menu sub-menu--closed">
+							<?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">
+							<?php endif; ?>
+
+							<li class="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);
+								?>
+									<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 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; ?>
+
+			<?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">

template-components/header/menu-renovateur_old.php

@@ -0,0 +1,59 @@
+<?php
+$menu_name = 'renovateur';
+$locations = get_nav_menu_locations();
+$menu = wp_get_nav_menu_object($locations[$menu_name]);
+$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
+// echo '<pre>';
+// print_r($menuitems);
+// echo '</pre>';
+?>
+
+
+
+
+
+<!-- MENU RENOV ANCIEN -->
+
+<div class="menu-renovateur">
+
+	<div class="website_logo">
+		<?php if (has_custom_logo()) { ?>
+			<?php the_custom_logo(); ?>
+		<?php } else { ?>
+			<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
+				<?php echo get_bloginfo('name'); ?>
+			</a>
+
+			<p class="text-sm font-light text-gray-600">
+				<?php echo get_bloginfo('description'); ?>
+			</p>
+
+		<?php } ?>
+
+
+
+	</div>
+	<?php
+	wp_nav_menu(
+		array(
+			'container'    => 'false',
+			'theme_location'  => 'renovateur',
+			'li_class'        => 'menu-navlink',
+			'fallback_cb'     => false,
+			'show_parent' => true,
+			'menu_class'     => "menu-renovateur__navlist",
+		)
+	);
+	?>
+
+	<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'); ?>
+</div>

theme.json

@@ -85,7 +85,7 @@
           "color": "#FFE5FD"
         },
         {
-          "name": "Location",
+          "name": "Location / Rénovation Circulaire",
           "slug": "location",
           "color": "#DF002B"
         },