https://connection.newmanministry.com/wp-content/themes/newman-base/js/navigation.js?ver=1.0.0

1(function() {
2	const siteNavigation = document.getElementById('site-navigation');
3	let scrollPosition = 0; // Variable to store the scroll position
4
5	// Return early if the navigation doesn't exist.
6	if (!siteNavigation) {
7		return;
8	}
9
10	// Selecting the correct button element by ID (menuToggle).
11	const button = document.getElementById('menuToggle');
12
13	// Return early if the button doesn't exist.
14	if (!button) {
15		console.error('Menu toggle button not found!');
16		return;
17	}
18
19	// Selecting the menu (assuming it's the first `ul` inside `site-navigation`).
20	const menu = siteNavigation.getElementsByTagName('ul')[0];
21
22	// Hide menu toggle button if menu is empty and return early.
23	if (!menu) {
24		button.style.display = 'none';
25		return;
26	}
27
28	// Ensure the menu has the 'nav-menu' class.
29	if (!menu.classList.contains('nav-menu')) {
30		menu.classList.add('nav-menu');
31	}
32
33	// Toggle the 'toggled' class on the siteNavigation and body when the menu button is clicked.
34	button.addEventListener('click', function() {
35		siteNavigation.classList.toggle('toggled');
36		button.classList.toggle('toggled');
37		document.body.classList.toggle('mobile-menu-open');
38
39		// Toggle the aria-expanded attribute for accessibility.
40		const isExpanded = button.getAttribute('aria-expanded') === 'true';
41		button.setAttribute('aria-expanded', !isExpanded);
42
43		// Disable or enable scrolling when the mobile menu is open/closed
44		if (document.body.classList.contains('mobile-menu-open')) {
45			// Save the current scroll position
46			scrollPosition = window.scrollY;
47
48			// Disable scrolling
49			document.body.style.overflow = 'hidden';
50			document.body.style.position = 'fixed'; // for iOS devices
51			document.body.style.width = '100%'; // ensure the page doesn't shift
52			document.body.style.top = `-${scrollPosition}px`; // Maintain scroll position
53		} else {
54			// Re-enable scrolling
55			document.body.style.overflow = '';
56			document.body.style.position = '';
57			document.body.style.width = '';
58			document.body.style.top = '';
59
60			// Restore the scroll position
61			window.scrollTo(0, scrollPosition);
62		}
63	});
64
65	// Close the menu when clicking outside, ensuring it only applies to the menu and menuToggle button
66	document.addEventListener('click', function(event) {
67		// Ensure this applies only to the menu and the menu toggle button
68		if (!siteNavigation.contains(event.target) && !button.contains(event.target)) {
69			if (siteNavigation.classList.contains('toggled')) {
70				siteNavigation.classList.remove('toggled');
71				document.body.classList.remove('mobile-menu-open');
72				button.setAttribute('aria-expanded', 'false');
73
74				// Re-enable scrolling when the menu is closed by clicking outside
75				document.body.style.overflow = '';
76				document.body.style.position = '';
77				document.body.style.width = '';
78				document.body.style.top = '';
79				window.scrollTo(0, scrollPosition);
80			}
81		}
82	});
83
84	// Handling focus and blur events for accessibility.
85	const links = menu.getElementsByTagName('a');
86	const linksWithChildren = menu.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
87
88	for (const link of links) {
89		link.addEventListener('focus', toggleFocus, true);
90		link.addEventListener('blur', toggleFocus, true);
91	}
92
93	for (const link of linksWithChildren) {
94		link.addEventListener('touchstart', toggleFocus, false);
95		link.addEventListener('focus', function () {
96			this.setAttribute('aria-expanded', 'true');
97		});
98		link.addEventListener('blur', function () {
99			this.setAttribute('aria-expanded', 'false');
100		});
101	}
102
103	function toggleFocus(event) {
104		if (event.type === 'focus' || event.type === 'blur') {
105			let self = this;
106			while (!self.classList.contains('nav-menu')) {
107				if ('li' === self.tagName.toLowerCase()) {
108					self.classList.toggle('focus');
109				}
110				self = self.parentNode;
111			}
112		}
113
114		if (event.type === 'touchstart') {
115			const menuItem = this.parentNode;
116			event.preventDefault();
117			for (const sibling of menuItem.parentNode.children) {
118				if (menuItem !== sibling) {
119					sibling.classList.remove('focus');
120				}
121			}
122			menuItem.classList.toggle('focus');
123		}
124	}
125})();