let navToggleBtn;
let navigation;

function navigationShow() {
	navToggleBtn.dataset.navState = "displayed";
	navToggleBtn.classList.remove("state-off");
	navToggleBtn.classList.add("state-on");

	navigation.classList.add("a-show");
}

function navigationHide() {
	navToggleBtn.dataset.navState = "hidden";
	navToggleBtn.classList.remove("state-on");
	navToggleBtn.classList.add("state-off");

	navigation.classList.add("a-hide");
	navigation.classList.remove("a-show");

	setTimeout(() => {
		navigation.classList.remove("a-hide");
	}, 300);
}

function hud() {
	console.log("HUD init");

	navToggleBtn = document.querySelector(".hud .nav-toggle");
	navigation = document.querySelector(".hud .navigation");

	navToggleBtn.addEventListener("click", e => {
		if(e.currentTarget.dataset.navState != "displayed") {
			navigationShow();
		} else {
			navigationHide();
		}
	});
}

export {
	hud,
	navigationShow,
	navigationHide
}