src/js/nav-toggle.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/*
 * Adds an event listener to all burgers to toggle navbar menu on click.
 */
document.addEventListener('DOMContentLoaded', function () {
	// get all navbar-burger elements
	const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

	// check if there are any navbar burgers
	if ($navbarBurgers.length > 0) {
		// add a click event on each of them
		$navbarBurgers.forEach(function(el) {
			el.addEventListener('click', function () {
				// get the target from the 'data-target' attribute
				const target = el.dataset.target;
				const $target = document.getElementById(target);

				// toggle the 'is-active' class on both the 'navbar-burger' and the 'navbar-menu'
				el.classList.toggle('is-active');
				$target.classList.toggle('is-active');
			});
		});
	}
});