LTD Nav Design JS

(function () {
	try {
		var debug = 0;
		var variation_name = "";

		if(window.Ltd_nav_design == 1) return;
		window.Ltd_nav_design = 1

		function waitForElement(selector, trigger, delayInterval, delayTimeout) {
			const interval = setInterval(function () {
				if (
					document &&
					document.querySelector(selector) &&
					document.querySelectorAll(selector).length > 0
				) {
					clearInterval(interval);
					trigger();
				}
			}, delayInterval);
			setTimeout(function () {
				clearInterval(interval);
			}, delayTimeout);
		}


		const content = {
			mainNav: [
				{
					name: 'SHOP',
					link: '#',
					childAccordion: 'yes',	
					child: [
						{
							dataId: 'shop_by-dev',
							title: 'SHOP BY DEVELOPMENT',
							items: [
								{
									name: 'Stage 1: Newborn Swaddling (0-3m)',
									link: '/au-en/shop-by-development-au/stage-1-newborn-swaddling',
								},
								{
									name: 'Stage 2: Ready to Roll (3-12m)',
									link: '/au-en/shop-by-development-au/stage-2-ready-to-roll',
								},
								{
									name: 'Stage 3: On the Move (6m-4Y)',
									link: '/au-en/shop-by-development-au/stage-3-on-the-move',
								},
							],
							footerLinkText: 'View All Products',
							footerLink: '/au-en/shop-by-development-au',
						},
						{
							dataId: 'shop_by-temp',
							title: 'SHOP BY TEMPERATURE',
							items: [
								{
									name: 'Summer (24-27)',
									link: '/au-en/shop-by-room-temperature-au/summer',
								},
								{
									name: 'All Seasons (18-24)',
									link: '/au-en/shop-by-room-temperature-au/all-year',
								},
								{
									name: 'Winter (<18)',
									link: '/au-en/shop-by-room-temperature-au/winter',
								},
							],
							footerLinkText: 'View All Products',
							footerLink: '/au-en/shop-by-room-temperature-au'
						},
						{
							dataId: 'all_products',
							title: 'ALL PRODUCTS',
							items: [
								{
									name: 'New Arrivals',
									link: '/au-en/all-products-au/new-arrivals',
								},
								{
									name: 'Swaddles',
									link: '/au-en/all-products-au/newborn-swaddles',
								},
								{
									name: 'Transition Bags and Suits',
									link: '/au-en/all-products-au/transition-bags-suits',
								},
								{
									name: 'Sleep Bags & Suits',
									link: '/au-en/all-products-au/sleep-bags-sleep-suits',
								},
								{
									name: 'Rompers & Pyjamas',
									link: '/au-en/all-products-au/rompers-pyjamas',
								},
								{
									name: 'Sheets & Bedding',
									link: '/au-en/all-products-au/sheets-bedding',
								},
								{
									name: 'Bundles',
									link: '/au-en/all-products-au/bundles',
								},
								{
									name: 'Maternity',
									link: '/au-en/maternity-au',
								},
								{
									name: 'Self-Soothing Toys',
									link: '/au-en/all-products-au/self-soothing-toys',
								},
							],
							footerLinkText: 'View All Products',
							footerLink: '/au-en/all-products-au'
						}
					]
				},
				{ name: 'SLEEP LIBRARY',
				  link: '#',
				  child: [
					{
						dataId: 'sleep_library',
						title: '',
						items: [
							{
								name: 'Sleep Library',
								link: '/au-en/baby-sleep-au',
							},
							{
								name: 'Essentials',
								link: '/au-en/baby-sleep-au/essentials',
							},
							{
								name: 'Spaces & Surrounds',
								link: '/au-en/baby-sleep-au/spaces',
							},
							{
								name: 'Routine',
								link: 'https://lovetodream.com/au-en/baby-sleep-au/routine',
							},
							{
								name: 'Challenges',
								link: '/au-en/baby-sleep-au/challenges',
							},
						],
						footerLinkText: '',
						footerLink: ''
					}
				  ],

				},
				{ name: 'BLOG',
				  link: '/au-en/blog/', 
				},
				{ name: 'STOCKISTS',
				  link: '/au-en/stores-near-you-au' 
			    },
				{ name: 'REVIEWS',
				  link: '/au-en/reviews-au' 
			    },
				{ name: 'FAQs',
				  link: '/au-en/faqs-au' 
			    },
				{ name: 'CLEARANCE',
				  link: '/au-en/clearance-au'
			    }
			],
		}

		function generateSubMenuHTML(submenuItems) {
			let htmlString = '';
			submenuItems.forEach(submenu => {
				htmlString += `
			  	<div class="submenu_wrapper" data-id="${submenu.dataId}">
					<h3>${submenu.title}</h3>
					<ul>
					${submenu.items.map(item => `<li><a href="${item.link}">${item.name}</a></li>`).join('\n')}
					</ul>
					<a href="${submenu.footerLink}" class="submenu_footer-link">${submenu.footerLinkText}</a>
			  	</div>`;
			});
			return htmlString;
		}

		function generateMenuHTML(items) {
			let htmlString = '';
			items.forEach(item => {
				if (item.child) {
					htmlString += `\t
				<li class="has-submenu ${item.childAccordion ? 'yg_child-accordion' : ''} main_menu"><a href="#" class="main_menu-item">${item.name}</a>
					<div class="submenu">
						<div class="submenu_body">	
							${generateSubMenuHTML(item.child)}
						</div>	
					</div>
				</li>\n`;
				} else {
					htmlString += `\t<li class="main_menu"><a href="${item.link}" class="main_menu-item">${item.name}</a></li>\n`;
				}
			});
			return htmlString;
		}


		const yg_nav =
			`<nav class="yg_navbar">
				<ul class="yg_nav-links" id="eg_navLinks">
					<div class="yg_overlay"></div>
		  			${generateMenuHTML(content.mainNav)}
				</ul>
			</nav>`

		const yg_mobileToggle = `<a href="#" class="mobileMenu-toggle">
                        <span class="mobileMenu-toggleIcon"></span>
                    </a>`;
					
		const yg_mobileNav = 
			`<div class="yg_mobileNav">
				<ul class="yg_mobileNav-links">
					${generateMenuHTML(content.mainNav)}
				</ul>
			</div>`			

		function init() {
			document.querySelector('.hc-nav-trigger').parentElement.parentElement.classList.add('yg_hide');
			document.querySelector('.hc-nav-trigger').parentElement.parentElement.insertAdjacentHTML('afterend',yg_mobileToggle);
			document.querySelector('.header-menu-login').parentElement.parentElement.classList.add('yg_header');
			document.querySelector('.header-menu-login').parentElement.classList.add('yg_desktop');
			document.querySelector('.header-menu-login').insertAdjacentHTML('beforebegin', yg_nav);
			document.body.insertAdjacentHTML('beforeend', yg_mobileNav);


			document.addEventListener("click", (e) => {
				screen.width < 1361 && clickEventHandler(e.target)
			});

			document.addEventListener("mouseover", (e) => {
				screen.width > 1360 && clickEventHandler(e.target)
			});

			window.addEventListener('resize',function(){
				const getHeaderHeight = document.querySelector('header').offsetHeight;
				const mobileScreenHeight = screen.height;
				document.querySelectorAll('.yg_navbar .yg_nav-links .submenu, .yg_mobileNav').forEach(function(element){
					element.style.top = getHeaderHeight+'px';
				})

				document.querySelector('.yg_mobileNav').style.maxHeight = (mobileScreenHeight - getHeaderHeight)+'px';
			})

		}

		function clickEventHandler(targetElement){
							// set the position of the nav modal
				
							const getHeaderHeight = document.querySelector('header').offsetHeight;
							const mobileScreenHeight = screen.height;
			
							document.querySelectorAll('.yg_navbar .yg_nav-links .submenu, .yg_mobileNav').forEach(function(element){
								element.style.top = getHeaderHeight+'px';
							})
			
							document.querySelector('.yg_mobileNav').style.maxHeight = (mobileScreenHeight - getHeaderHeight)+'px';
			
			
							// desktop dropdown menu 
							const dropdowns = document.querySelectorAll('.has-submenu');
							const dropdownToggles = document.querySelectorAll('.has-submenu .main_menu-item');
			
							const isDropdownToggleClicked = Array.from(dropdownToggles).some(toggle => toggle.contains(targetElement));
			
							if (isDropdownToggleClicked) {
								const clickedDropdown = targetElement.closest('.has-submenu');
			
								const isOpen = clickedDropdown.classList.contains('submenu-show');
			
								dropdowns.forEach(dropdown => {
									if (dropdown !== clickedDropdown && dropdown.classList.contains('submenu-show')) {
										dropdown.classList.remove('submenu-show');
										screen.width > 1360 && document.body.classList.remove("yg_overflow-hidden");
									}
								});
			
								if (!isOpen) {
									clickedDropdown.classList.add('submenu-show');
									screen.width > 1360 && 	document.body.classList.add("yg_overflow-hidden");
								} else {
									clickedDropdown.classList.remove('submenu-show');
									screen.width > 1360 && 	document.body.classList.remove("yg_overflow-hidden");
								}
							} else {
								const isDropdownClick = Array.from(dropdowns).some(dropdown => dropdown.contains(targetElement));
			
								if (!isDropdownClick) {
									const openDropdowns = document.querySelectorAll('.submenu-show');
									openDropdowns.forEach(dropdown => {
										dropdown.classList.remove('submenu-show');
										screen.width > 1360 && 	document.body.classList.remove("yg_overflow-hidden");
									});
								}
							}
			
							// mobile toggle nav icon
							if(targetElement.closest('.mobileMenu-toggle')){
								document.querySelector('.mobileMenu-toggle').classList.toggle('is-open');
								document.querySelector('.yg_mobileNav').classList.toggle('active');
								document.body.classList.toggle('yg_overflow-hidden')
							}	
			
							// child accordion 
							const header = targetElement.closest('.yg_mobileNav .yg_child-accordion .submenu h3');
							if (!header) return;
						  
							const accordionItem = header.parentElement;
							const isActive = accordionItem.classList.contains('active');
						  
							// Close all accordion items
							document.querySelectorAll('.yg_mobileNav .yg_child-accordion .submenu_wrapper').forEach(item => item.classList.remove('active'));
						  
							if (!isActive) {
							  accordionItem.classList.add('active'); // Open clicked accordion item
							}	
		}

		waitForElement('.hc-nav-trigger', init, 50, 15000);

	} catch (e) {
		if (debug) console.log(e, "error in Test" + variation_name);
	}
})();