FEATURE Handling secondary submenus

functions.php

@@ -12,7 +12,7 @@ require_once(__DIR__ . '/includes/social-networks.php');
 require_once(__DIR__ . '/includes/forms.php');
 require_once(__DIR__ . '/includes/rapport-activites.php');
 require_once(__DIR__ . '/includes/equipe.php');
-
+require_once(__DIR__ . '/includes/navwalker.php');
 
 // require_once(__DIR__ . '/includes/widget.php');
 // require_once( __DIR__ . '/includes/taxonomy.php');

includes/navwalker.php

@@ -1,28 +1,93 @@
 <?php
 
-class wp_nav_menu_walker extends Walker_Nav_menu
+/* -----------------------------------------------------------
+	Walker to ReWrap li submenu parent with button instead of
+ -----------------------------------------------------------*/
+
+function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
+    // #### MENU HOMEGRADE HEADER
+    if ($args->theme_location === "secondary" && in_array('menu-item-has-children', $item->classes, true)) {
 
-    function start_lvl(&$output, $depth = 0, $args = null)
+        $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
-    {
-
-        $tmp_class = "child-" . $depth;
-
-        $output .= "<ul class='" . $tmp_class . "'>";
-
-    }
-
-    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
-    {
-
-        $output .= "<li>I like pie" . $item->title;
-
-        // var_dump($args);
-    }
-
-    function end_el(&$output, $item, $depth = 0, $args = null)
-    {
-        $output .= "...</li>";
     }
 
+    return $output;
 }
+add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
+
+
+
+/* ----------------------------------------------------------------
+	##### Adds option 'li_class' to 'wp_nav_menu
+ ------------------------------------------------------------------*/
+
+function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth)
+{
+    if (isset($args->li_class)) {
+        $classes[] = $args->li_class;
+    }
+
+    if (isset($args->{"li_class_$depth"})) {
+        $classes[] = $args->{"li_class_$depth"};
+    }
+
+    return $classes;
+}
+
+add_filter('nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4);
+
+
+
+/* ----------------------------------------------------------------
+     ##### Adds option 'submenu_class' to 'wp_nav_menu'
+  ------------------------------------------------------------------*/
+
+function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
+{
+    if (isset($args->submenu_class)) {
+        $classes[] = $args->submenu_class;
+    }
+
+    if (isset($args->{"submenu_class_$depth"})) {
+        $classes[] = $args->{"submenu_class_$depth"};
+    }
+
+    return $classes;
+}
+
+add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
+
+/* ----------------------------------------------------------------
+	##### Inject ACF page_icon into submenu items
+ ------------------------------------------------------------------*/
+function carhop_add_submenu_item_icon($output, $item, $depth, $args)
+{
+    // Only for submenu items (depth >= 1
+    if (!isset($args->theme_location) || $args->theme_location !== 'secondary' || $depth < 1 || !function_exists('get_field')) {
+        return $output;
+    }
+
+    // Try fetching the icon from the menu item itself, then fallback to linked object (e.g., page)
+    $pageIcon = get_field('page_icon', $item->object_id);
+
+    if (empty($pageIcon)) {
+        return $output;
+    }
+
+
+    $icon_html = '';
+    $excerpt_html = '';
+    // Attachment array with ID (ACF image field)
+    if (is_array($pageIcon) && isset($pageIcon['url'])) {
+        $icon_html = '<img src="' . esc_url($pageIcon['url']) . '" class="menu-item__icon-img" alt="" aria-hidden="true" />';
+    }
+
+    if (has_excerpt($item->object_id)) {
+        $excerpt_html = '<p class="menu-item__excerpt">' . get_the_excerpt($item->object_id) . '</p>';
+    }
+
+
+    return '<a class="menu-item__content" href="' . $item->url . '">' . $icon_html  . '<div class="menu-item__content-inner"><p class="menu-item__title">' . $item->title  . '</p>' . $excerpt_html . '</div></a>';
+}
+add_filter('walker_nav_menu_start_el', 'carhop_add_submenu_item_icon', 15, 4);

resources/css/layout/nav/secondary-menu.css

@@ -9,7 +9,7 @@
   .secondary-menu-nav {
     @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
 
-    ul {
+    > ul {
       @apply flex flex-col lg:flex-row justify-between gap-4;
     }
     a {
@@ -38,6 +38,71 @@
       }
     }
   }
+
+  /* #### PARENT WITH CHILDREN */
+  li.menu-item-has-children {
+    @apply relative;
+
+    .sub-menu {
+      @apply hidden;
+    }
+    &:has(button.menu-item__submenu-toggle[aria-expanded='true']) {
+      .sub-menu {
+        @apply block;
+      }
+    }
+  }
+
+  /* #### SUBMENU */
+
+  button.menu-item__submenu-toggle {
+    @apply text-white;
+    &:hover,
+    &[aria-expanded='true'] {
+      @apply underline underline-offset-8 decoration-1;
+    }
+  }
+  .sub-menu {
+    @apply flex flex-col border border-white bg-primary  absolute top-10 left-0 z-30;
+    width: 330px;
+
+    li {
+      @apply border-b border-white;
+      a {
+        @apply py-6 px-4 block w-full;
+
+        &:hover {
+          backdrop-filter: brightness(0.9);
+        }
+      }
+      &:last-child {
+        @apply border-b-0;
+      }
+    }
+
+    li.has-page-icon {
+      .menu-item__content {
+        @apply flex items-center gap-4;
+      }
+    }
+
+    a.menu-item__content {
+      .menu-item__title {
+        @apply font-medium;
+      }
+      .menu-item__excerpt {
+        @apply opacity-80;
+      }
+
+      &:hover {
+        text-decoration: none !important;
+
+        .menu-item__title {
+          text-decoration: underline !important;
+        }
+      }
+    }
+  }
 }
 
 .secondary-menu-container {

resources/js/app.ts

@@ -3,7 +3,7 @@ import initFooterShapes from './footer';
 import handleScrollTop from './utilities/scroll-top';
 import handleInsidePageScrolling from './page-scrolling';
 window.addEventListener('load', function () {
-  // menuInit();
+  menuInit();
   initFooterShapes();
   handleScrollTop();
   handleInsidePageScrolling();

resources/js/header.js

@@ -1,61 +1,49 @@
 export default function menuInit() {
-  let main_navigation =
+  let main_navigation = document.querySelector('#primary-menu');
-    document.querySelector('#primary-menu');
   const header = document.querySelector('#primary-header');
-  const primary_menu =
+  const primary_menu = header.querySelector('#primary-menu');
-    header.querySelector('#primary-menu');
+  const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
-  const burgerMenuToggle = header.querySelector(
+  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
-    '#burger-menu-toggle'
+
-  );
+  console.log(submenuToggles);
-  const submenuToggles = primary_menu.querySelectorAll(
-    '.menu-item-submenu-toggle'
-  );
 
   // #### Open/close burger nav
-  burgerMenuToggle.addEventListener('click', function (e) {
+  // burgerMenuToggle.addEventListener('click', function (e) {
-    e.preventDefault();
+  //   e.preventDefault();
-    header.classList.toggle('nav-open');
+  //   header.classList.toggle('nav-open');
-    burgerMenuToggle.toggleAttribute('aria-expanded');
+  //   burgerMenuToggle.toggleAttribute('aria-expanded');
-    gsap.from(primary_menu, {
+  //   gsap.from(primary_menu, {
-      opacity: 20,
+  //     opacity: 20,
-      y: '-100vh',
+  //     y: '-100vh',
-      duration: 0.5,
+  //     duration: 0.5,
-      ease: Power4.easeOut,
+  //     ease: Power4.easeOut,
-    });
+  //   });
-  });
+  // });
 
-  // #### Close nav when reaching the end of the menu with tab
+  // // #### Close nav when reaching the end of the menu with tab
-  document.addEventListener(
+  // document.addEventListener(
-    'focusin',
+  //   'focusin',
-    (e) => {
+  //   (e) => {
-      const header = document.querySelector(
+  //     const header = document.querySelector('#primary-header');
-        '#primary-header'
+  //     if (
-      );
+  //       header.classList.contains('nav-open') &&
-      if (
+  //       !header.contains(document.activeElement)
-        header.classList.contains('nav-open') &&
+  //     ) {
-        !header.contains(document.activeElement)
+  //       header.classList.remove('nav-open');
-      ) {
+  //       burgerMenuToggle.setAttribute('aria-expanded', false);
-        header.classList.remove('nav-open');
-        burgerMenuToggle.setAttribute(
-          'aria-expanded',
-          false
-        );
 
-        burgerMenuToggle.focus();
+  //       burgerMenuToggle.focus();
-      }
+  //     }
-    },
+  //   },
-    true
+  //   true
-  );
+  // );
 
   submenuToggles.forEach((button) => {
     button.addEventListener('click', function (e) {
-      let isExpanded =
+      let isExpanded = button.getAttribute('aria-expanded') === 'true';
-        button.getAttribute('aria-expanded') === 'true';
       button.setAttribute('aria-expanded', !isExpanded);
 
-      button.parentElement
+      button.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
-        .querySelector('.sub-menu')
-        .classList.toggle('sub-menu-open');
     });
   });
 }