https://public.axsmarine.com/wp-content/themes/axsmarine/assets/src/scripts/navbar.js?ver=1790278461

1// // Navbar menu
2$(function () {
3	
4	function closeSolutionNav(element){
5		element.removeClass('nav-show');
6		$('.nav-dropdown-content').removeClass('nav-show');
7		$('.arrow-mark').css('transform', 'rotate(0deg)');
8	}
9
10	function openSolutionNav(element){
11		element.addClass('nav-show');
12		$('.nav-dropdown-content').addClass('nav-show');
13		$('.arrow-mark').css('border-top', '3px solid #323232');
14		$('.arrow-mark').css('transform', 'rotate(180deg)');
15		$('.arrow-mark').css('transition', 'transform .2s ease-in-out');
16	}
17
18	$('#solutions').click(function (e) {
19		e.stopPropagation();
20		e.preventDefault();
21
22		if ($(e.target).hasClass('nav-show')) {
23			closeSolutionNav($(e.target));
24		} else {
25			openSolutionNav($(e.target));
26		}
27		$('.menu-item-has-children').removeClass("is-opened");
28	});
29	
30	$('.menu-item-has-children > a').click(function (e) {
31		
32		let $this = $(this);
33		e.stopPropagation();
34		e.preventDefault();
35		$('.menu-item-has-children').not($this.parent()).removeClass("is-opened");
36		$this.parent().toggleClass('is-opened');
37		closeSolutionNav($("#solutions"));
38		
39	});
40
41	$(document).click(function () {
42		$('.arrow-mark').css('border-top', '3px solid transparent');		
43		closeSolutionNav($("#solutions"));
44		$('.menu-item-has-children').removeClass("is-opened");
45	});
46
47	$('.subheader-dropdown-arrow').click(function (e) {
48		e.stopPropagation();
49		e.preventDefault();
50		$('.subheader-dropdown').toggleClass('flex-subheader-nav-show');
51		if ($('.subheader-dropdown').hasClass('flex-subheader-nav-show')) {
52			$('.subheader-dropdown-arrow').css('transform', 'rotate(180deg)');
53			$('.subheader-dropdown-arrow').css('transition', 'transform .2s ease-in-out');
54			$('.axsreqauest-mobile').css('display', 'flex');
55			$('.axsreqauest-mobile').css('max-height', 'unset');
56			$('.axsreqauest-mobile').css('height', '32px');
57			$('.axsreqauest-mobile').css('align-items', 'center');
58			$('.axsreqauest-mobile').css('justify-content', 'center');
59		} else {
60			$('.subheader-dropdown-arrow').css('transform', 'rotate(0deg)');
61		}
62	});
63
64	$(".nav-dropdown-content").click(function (e) {
65		e.stopPropagation();
66	});
67
68	$('.responsive-nav').click(function (e) {
69		$('.responsive-nav').toggleClass('nav-btn');
70		if ($('.responsive-nav').hasClass('nav-btn')) {
71			$('.navbar-toggle').css('transform', 'rotateY(180deg)');
72			$('.x-top').css('transform', ' translate(4px, -1px) rotate(45deg)');
73			$('.x-bot').css('transform', ' translate(4px, 1px) rotate(-45deg)');
74			$('.x-mid').css('visibility', 'hidden');
75		} else {
76			$('.navbar-toggle').css('transform', 'rotateY(0)');
77			$('.x-top').css('transform', 'rotate(0) translate(0, 0)');
78			$('.x-bot').css('transform', 'rotate(0) translate(0, 0)');
79			$('.x-mid').css('visibility', 'visible');
80		}
81	});
82})
83
84// Nav revamp js
85document.addEventListener('DOMContentLoaded', function() {
86	const solutionsNavButton = document.querySelector('#solutions-nav');
87	
88	// Check if the solutions nav button exists before proceeding
89	if (!solutionsNavButton) {
90		return;
91	}
92	
93	const solutionsNavButtonLink = solutionsNavButton.querySelector(".nav-item");
94	const solutionsDropdownMenu = solutionsNavButton.querySelector('.solutions-dropdown-content');
95	const solutionsMenuSvg = solutionsNavButton.querySelector("svg");
96	const solutionsPrimaryMenus = solutionsNavButton.querySelectorAll('.primary-menu');
97	const solutionsPrimaryMenuBlank = solutionsNavButton.querySelector('.primary-menu.__blank');
98	const solutionsSecondaryMenuBlank = solutionsNavButton.querySelector('.secondary-menu.__blank');
99	const solutionsSecondaryMenus = solutionsDropdownMenu.querySelectorAll('.secondary-menu');
100
101	const solutionsPrimaryMenusFirst = solutionsDropdownMenu.querySelector('.primary-menu');
102	const solutionsSecondaryMenusFirst = solutionsDropdownMenu.querySelector('.secondary-menu');
103
104	// Function to equalize heights of .single-link elements inside .links-container.right-col-content
105	const equalizeDynamicHeights = () => {
106		const containers = document.querySelectorAll('.links-container.right-col-content');
107
108		containers.forEach(container => {
109		  const singleLinks = container.querySelectorAll('.single-link.dynamic-height');
110		  let maxLinkHeight = 0;
111	  
112		  // Reset heights to auto to allow accurate measurement
113		  singleLinks.forEach(link => {
114			link.style.height = 'auto';
115		  });
116	  
117		  // Find the tallest .single-link
118		  singleLinks.forEach(link => {
119			const linkHeight = link.offsetHeight;
120			if (linkHeight > maxLinkHeight) maxLinkHeight = linkHeight;
121		  });
122	  
123		  // Apply the tallest height to all .single-link elements
124		  singleLinks.forEach(link => {
125			link.style.height = maxLinkHeight + 'px';
126		  });
127		});
128	};
129
130	const showFirstMenu = () => {
131		if (window.innerWidth >= 1025) {
132			solutionsPrimaryMenusFirst.classList.add("active");
133			solutionsSecondaryMenusFirst.classList.add("visible");
134			handleItemsInSecondaryMenu(solutionsSecondaryMenusFirst);
135
136			// Apply dynamic height equalization
137			equalizeDynamicHeights();
138
139			solutionsSecondaryMenusFirst.querySelector(".item").classList.add("active");
140			solutionsSecondaryMenuBlank.classList.remove("visible");
141		}
142	}
143
144	const mobileHamburgerBtn = document.querySelector(".nav-revamp-hamburger");
145	const mobileNavMenu = document.querySelector(".prim-menu-container");
146
147	mobileHamburgerBtn.addEventListener("click", () => {
148		mobileNavMenu.classList.toggle("is-opened");
149		mobileHamburgerBtn.classList.toggle('active');
150
151		// solutionsDropdownMenu.style.display = "block";
152		// solutionsNavButton.style.pointerEvents = "none"
153		// solutionsNavButtonLink.style.pointerEvents = "none"
154		// solutionsMenuSvg.style.display = "none";
155		solutionsDropdownMenu.style.pointerEvents = "all";
156

157		solutionsPrimaryMenus.forEach((primMenu) => {
158			primMenu.classList.remove("active");
159		})
160
161		solutionsSecondaryMenus.forEach((secMenu) => {
162			secMenu.classList.remove("visible");
163		})
164
165		// Select all mobile menu items
166		const mobileMenus = document.querySelectorAll(".item--mobile");
167		
168		// Add event listeners to each mobile menu item
169		mobileMenus.forEach((menu) => {
170			menu.addEventListener("click", (event) => {
171				// Get the clicked menu item
172				const menuItem = event.currentTarget;
173				const menuSvg = menu.querySelector('svg');
174
175				// Get the corresponding right-col-mobile (sibling) for the clicked item
176				const rightCol = menuItem.nextElementSibling;
177				// const rightColDesktop = menuItem.ElementSibling;
178				// menuSvg.classList.toggle('rotate');
179
180				// Remove 'rotate' class from all other SVGs
181				document.querySelectorAll(".item--mobile svg.rotate").forEach((openSvg) => {
182					if (openSvg !== menuSvg) {
183						openSvg.classList.remove('rotate');
184					}
185				});
186			
187				// Toggle 'rotate' class for the current menu item's SVG
188				menuSvg.classList.toggle('rotate');
189
190				// Close all other open right-col-mobile elements
191				document.querySelectorAll(".right-col-mobile.visible").forEach((openCol) => {
192					if (openCol !== rightCol) {
193						openCol.classList.remove("visible");
194						// menuSvg.classList.toggle('rotate');
195					}
196				});
197
198				// Check if the rightCol exists and toggle the visibility
199				if (rightCol && rightCol.classList.contains('right-col-mobile')) {
200					rightCol.classList.toggle('visible');
201				}
202			});
203		});
204	});
205
206	// Function to handle the items inside the visible secondary menu
207	const handleItemsInSecondaryMenu = (sibling) => {
208		// All items inside the visible secondary-menu clickable
209		const items = sibling.querySelectorAll('.item');
210
211		// Reset all items first
212		items.forEach((i) => {
213			i.classList.remove('active');
214			const rightCol = i.querySelector('.right-col');
215			if (rightCol) {
216				rightCol.style.display = 'none'; // Hide all right-cols initially
217			}
218		});
219
220		// Activate the first item
221		const firstItem = items[0];
222		if (firstItem) {
223			firstItem.classList.add('active');
224			const firstRightCol = firstItem.querySelector('.right-col');
225			if (firstRightCol) {
226				firstRightCol.style.display = 'block'; // Show the right-col of the first item
227			}
228		}
229
230		// Apply dynamic height equalization for the visible secondary menu
231		equalizeDynamicHeights();
232
233		// Set up click event for the items
234		items.forEach((item) => {
235			item.addEventListener('click', () => {
236				// Remove 'active' class from all items within the same secondary-menu
237				items.forEach((i) => {
238					i.classList.remove('active');
239					
240					// Hide the right-col div of non-active items
241					const rightCol = i.querySelector('.right-col');
242					if (rightCol) {
243						rightCol.style.display = 'none';
244					}
245				});
246				
247				// Add 'active' class to the clicked item
248				item.classList.add('active');
249
250				// Show the right-col div inside the clicked item
251				const rightCol = item.querySelector('.right-col');
252				if (rightCol) {
253					rightCol.style.display = 'block';
254				}
255
256				// Apply dynamic height equalization when switching between items
257				equalizeDynamicHeights();
258			});
259		});
260	};
261
262	// Add event listeners to all primary menus
263	solutionsPrimaryMenus.forEach((menu) => {
264		menu.addEventListener("click", (event) => {
265			const wasOpen = menu.classList.contains('active');
266
267			// Remove active from all primary-menu elements
268			solutionsPrimaryMenus.forEach((item) => {
269				item.classList.remove("active");
270				const sibling = item.nextElementSibling;
271				// Check if sibling exists and has class 'secondary-menu', then remove 'visible' from it
272				if (sibling && sibling.classList.contains("secondary-menu")) {
273					sibling.classList.remove("visible");
274				}
275			});
276
277			if (!wasOpen){
278			// Add 'active' class to the clicked menu
279				menu.classList.add("active");
280
281				// Show the corresponding secondary-menu
282				const sibling = menu.nextElementSibling;
283				if (sibling && sibling.classList.contains("secondary-menu")) {
284					sibling.classList.add("visible");
285	
286					// Attach event listeners to items inside this secondary menu
287					handleItemsInSecondaryMenu(sibling);
288				}
289			} else {
290				solutionsPrimaryMenuBlank.classList.add('active')
291
292
293				// Show the corresponding secondary-menu
294				const sibling = solutionsPrimaryMenuBlank.nextElementSibling;
295				if (sibling && sibling.classList.contains("secondary-menu")) {
296					sibling.classList.add("visible");
297	
298					// Attach event listeners to items inside this secondary menu
299					handleItemsInSecondaryMenu(sibling);
300				}
301			}
302		});
303	});
304
305
306	// Handle solutions nav button click (toggle the dropdown)
307	solutionsNavButton.addEventListener("click", () => {
308		// Prevent closing main nav menu if click in it
309		solutionsDropdownMenu.addEventListener("click", (event) => {
310			event.stopPropagation();
311		});
312
313		solutionsDropdownMenu.classList.toggle("visible");
314		solutionsMenuSvg.classList.toggle("rotate");
315		solutionsNavButtonLink.classList.toggle("active");
316
317		showFirstMenu();
318
319		if(solutionsNavButton.getAttribute("data-show-first")) {
320			showFirstMenu();
321		}
322	});
323
324	// Handle the dropdown elements
325	const dropdownElements = document.querySelectorAll("[id^='dropdown-element-']");

326	dropdownElements.forEach((dropdownElement) => {
327		const companyNavButtonLink = dropdownElement.querySelector(".nav-item");
328		const companyDropdownMenu = dropdownElement.querySelector('.company-dropdown-content');
329		const companyMenuSvg = dropdownElement.querySelector("svg");
330
331		dropdownElement.addEventListener("click", () => {
332			companyDropdownMenu.classList.toggle("visible");
333			companyMenuSvg.classList.toggle("rotate");
334			companyNavButtonLink.classList.toggle("active");
335		});
336	});
337
338	document.addEventListener("click", (event) => {
339		const outsideClickSolutions = !solutionsDropdownMenu.contains(event.target) && !solutionsNavButton.contains(event.target);
340
341		if (outsideClickSolutions) {
342			solutionsDropdownMenu.classList.remove("visible");
343			solutionsMenuSvg.classList.remove("rotate");
344			solutionsNavButtonLink.classList.remove("active");
345			solutionsSecondaryMenuBlank.classList.remove("visible");
346
347			solutionsPrimaryMenus.forEach((i, index)=> {
348				i.classList.remove("active");
349			});
350
351			solutionsSecondaryMenus.forEach((i, index)=> {
352				i.classList.remove("visible");
353			})
354
355			solutionsNavButton.setAttribute("data-show-first", true);
356		}
357
358		dropdownElements.forEach((dropdownElement) => {
359			const companyDropdownMenu = dropdownElement.querySelector('.company-dropdown-content');
360			const companyMenuSvg = dropdownElement.querySelector("svg");
361			const companyNavButtonLink = dropdownElement.querySelector(".nav-item");
362
363			const outsideClickCompany = !companyDropdownMenu.contains(event.target) && !dropdownElement.contains(event.target);
364			if (outsideClickCompany) {
365				companyDropdownMenu.classList.remove("visible");
366				companyMenuSvg.classList.remove("rotate");
367				companyNavButtonLink.classList.remove("active");
368			}
369		});
370	});
371
372	// Declare the variable lastScrollTop
373	let lastScrollTop = 0;
374	const navButtons = document.querySelectorAll(".prim-menu-container__menu-wrapper__item");
375
376	// Function to close the menu on scroll
377	const closeMenuOnScroll = () => {
378		const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
379
380		navButtons.forEach((menu) => {
381			// Check if the item has a <div> child
382			const childDiv = menu.querySelector('div');
383			const navBtn = menu.querySelector('a');
384			const dropdownIcon = menu.querySelector('svg'); // Select the <svg> element
385
386			if (childDiv) {
387				
388				let primMenu = childDiv.querySelector(".primary-menu.active")
389				let secMenu = childDiv.querySelector(".secondary-menu.visible")
390
391				// If scrolling down
392				if (currentScroll > lastScrollTop) {
393					// Remove 'visible' class if present
394					if (childDiv.classList.contains('visible')) {
395						childDiv.classList.remove('visible');
396						navBtn.classList.remove('active')
397					}
398
399					// Remove 'rotate' class from <svg>, if present
400					if (dropdownIcon && dropdownIcon.classList.contains('rotate')) {
401						dropdownIcon.classList.remove('rotate');
402					}
403					
404					// Remove classes only if primMenu and secMenu exist
405					if (primMenu) {
406						primMenu.classList.remove("active");
407					}
408					if (secMenu) {
409						secMenu.classList.remove("visible");
410					}
411				}
412			}
413		});
414
415		lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // Ensure it doesn't go negative
416	};
417
418	// Add event listener for scrolling
419	window.addEventListener('scroll', () => {
420		if (window.innerWidth >= 1025) {
421			closeMenuOnScroll();
422		}
423	});
424});