https://truebluesalon.com/wp-content/themes/ph-base-tailwind/assets/js/mobile-hamburger-subitems.js?ver=1.0.0

1// This function initializes the mobile menu by setting the sub-menu's max height to 0 and setting its height as a data attribute.
2function initializeMobileMenu() {
3  const liHasChildren = document.querySelectorAll('#mobile-menu .menu-item-has-children');
4  liHasChildren.forEach((li) => {
5    const subnav = li.querySelector('.sub-menu');
6    if (subnav) {
7      // Store the scroll height to smoothly open later
8      subnav.dataset.height = subnav.scrollHeight;
9      subnav.style.maxHeight = '0';
10    }
11  });
12}
13
14// Ensure chevrons are added when the DOM is ready, for all relevant menu items.
15jQuery(document).ready(function () {
16  const $menuItemsWithSubmenus = jQuery('#mobile-menu #menu-primary > li.menu-item-has-children');
17
18  /**
19   * Initialize Chevrons. This runs once on document ready.
20   */
21  $menuItemsWithSubmenus.each(function () {
22    const $menuItem = jQuery(this);
23    const $menuLink = $menuItem.children('a'); // Get the direct link within the LI
24    // Append the chevron icon to the link
25    $menuLink.append('<span class="submenu-indicator"> <i class="fa-solid fa-chevron-down"></i></span>');
26    // Add classes for styling and targeting
27    $menuLink.addClass('has-submenu-link');
28  });
29});
30
31
32// This function initializes the mobile sub-menu by adding click event listener to each sub-menu item and toggling its height.
33function initializeMobileSubnav() {
34  const menuLinks = document.querySelectorAll('#mobile-menu li.menu-item-has-children > a');
35  menuLinks.forEach((link) => {
36    link.addEventListener('click', (event) => {
37      event.preventDefault(); // Prevent default link behavior (e.g., navigating)
38
39      const parentLi = link.closest('li');
40      const subnav = parentLi.querySelector('ul.sub-menu');
41      const chevron = link.querySelector('.submenu-indicator'); // Get the chevron for this link
42
43      if (subnav) {
44        // Close any other open submenus and reset their chevrons
45        const allOpenLis = document.querySelectorAll('#mobile-menu li.menu-item-has-children.is_open');
46        allOpenLis.forEach((openLi) => {
47          if (openLi !== parentLi) { // If it's not the current parentLi
48            const otherSubnav = openLi.querySelector('.sub-menu');
49            const otherLink = openLi.querySelector('a.has-submenu-link');
50            const otherChevron = openLi.querySelector('.submenu-indicator');
51
52            openLi.classList.remove('is_open');
53            if (otherSubnav) otherSubnav.style.maxHeight = `0`;
54            if (otherChevron) otherChevron.classList.remove('rotated');
55            // Remove color from other links if you also want that behavior
56            if (otherLink) otherLink.classList.remove('is-active-submenu');
57          }
58        });
59
60        // Toggle the current submenu
61        const isCurrentlyOpen = parentLi.classList.contains('is_open');
62
63        if (!isCurrentlyOpen) {
64          // OPEN the submenu
65          parentLi.classList.add('is_open');
66          subnav.style.maxHeight = `${subnav.dataset.height}px`; // Use data-height to open
67          if (chevron) chevron.classList.add('rotated'); // Rotate chevron up
68          link.classList.add('is-active-submenu'); // Add color to parent link
69        } else {
70          // CLOSE the submenu
71          parentLi.classList.remove('is_open');
72          subnav.style.maxHeight = `0`; // Close submenu
73          if (chevron) chevron.classList.remove('rotated'); // Rotate chevron down
74          link.classList.remove('is-active-submenu'); // Remove color from parent link
75        }
76      }
77    });
78  });
79}
80
81// Your other mobile menu functions (no changes here, keeping for context)
82function initializeMobileIntSubnav() {
83  const mobileSubnav = document.querySelector('#mobile-nav');
84  if (mobileSubnav) {
85    mobileSubnav.addEventListener('click', toggleMobileSubnav);
86    const subnav = document.querySelector('#mobile-subnav');
87    if (subnav) subnav.style.maxHeight = '0px';
88  }
89}
90
91function toggleMobileSubnav() {
92  const subnav = document.querySelector('#mobile-subnav');
93  if (subnav) {
94    const maxHeight = subnav.style.maxHeight;
95    if (maxHeight !== '0px' && maxHeight !== '') {
96      subnav.style.maxHeight = '0px';
97    } else {
98      subnav.style.maxHeight = `${subnav.scrollHeight}px`;
99    }
100  }
101}
102
103// This function initializes the mobile menu and its sub-menus.
104function initMobileMenuFuncs() {
105  initializeMobileMenu();
106  initializeMobileSubnav(); // This is where the click logic is
107  initializeMobileIntSubnav(); // This seems to be for another mobile subnav, not tied to #menu-primary
108}
109
110// Call the function to initialize the mobile menu and its sub-menus.
111initMobileMenuFuncs();
112
113
114
115
116/* (function() {
117  // I do declare...
118  // const mobileSubnav = document.querySelector('#mobile-nav');
119  
120  
121  //____________________________________// MOBILE MENU
122  
123  // declare that mobile stuffs
124  let liHasChildren = document.querySelectorAll('#mobile-menu .menu-item-has-children');
125  
126  // the magic that handles subnav heights
127  function initMobileMenu() {
128    liHasChildren?.forEach(li => {
129      const subnav = li.querySelector('.is_subnav');
130      subnav.dataset.height = subnav.getBoundingClientRect().height;
131      subnav.style.maxHeight = '0';
132    })
133  }
134  
135  // event listener for mobile hamburger menu for items with sub-items
136  function initMobileSubnav() {
137    document.querySelectorAll('#mobile-menu li.menu-item-has-children > a')?.forEach(link => {
138      link.addEventListener('click', e => {
139        e.preventDefault();
140        const subnav = link.closest('li').querySelector('ul.is_subnav');
141        // console.log(subnav)
142        const allSubnavs = document.querySelectorAll('#mobile-menu .is_subnav');

143        allSubnavs.forEach(nav => {
144          if (nav != subnav) {
145            nav.closest('li').classList.remove('is_open');
146            nav.style.maxHeight = `0`;
147          }
148        })
149        if (subnav.style.maxHeight == '0px' || subnav.style.MaxHeight == '0') {
150          subnav.closest('li').classList.add('is_open');
151          subnav.style.maxHeight = `${subnav.dataset.height}px`;
152        } else {
153          subnav.closest('li').classList.remove('is_open');
154          subnav.style.maxHeight = `0`;
155          // subnav.closest('li').classList.remove('is_open');
156        }
157      })
158    })
159    // displays or hides the mobile menu based on screen width
160    // if (innerWidth > 1024 && document.querySelector('#mobile-menu') !== null) {
161    //   document.querySelector('#mobile-menu').style.display = 'none'
162    // };
163  }
164  
165  //____________________________________// MOBILE SUBNAV MENU
166  
167  function initMobileIntSubnav() {
168    const mobileSubnav = document.querySelector('#mobile-nav');
169    if (mobileSubnav) {
170      mobileSubnav.addEventListener('click', toggleMobileSubnav);
171      const subnav = document.querySelector('#mobile-subnav');
172      if (subnav) subnav.style.maxHeight = '0px';
173    }
174  }
175  
176  function toggleMobileSubnav() {
177    const subnav = document.querySelector('#mobile-subnav');
178    console.log(subnav.style.maxHeight)
179    if (subnav.style.maxHeight !== '0px' &&
180        subnav.style.maxHeight !== '') {
181      subnav.style.maxHeight = '0px';
182    } else {
183      subnav.style.maxHeight = `${subnav.scrollHeight}px`;
184    }
185  }
186  
187  // do the things
188  initMobileMenu();
189  initMobileSubnav();
190  initMobileIntSubnav();
191})() 
192*/