var navList = document.querySelector("header nav ul");
var navButton = document.querySelector("header nav button");

const navItems = navList.querySelectorAll("a");
const firstItem = navItems[0];
const lastItem = navItems[navItems.length - 1];

const openMenu = function() {
	navList.ariaHidden = "false";
	navButton.ariaExpanded = "true";
}

const closeMenu = function() {
	navList.ariaHidden = "true";
	navButton.ariaExpanded = "false";
}

if (window.innerWidth <= 650) {
	navList.ariaHidden = "true";
}

/* basic open and close */
navButton.addEventListener("click", (e) => {
	if (navButton.ariaExpanded === "true") closeMenu();
	else openMenu();
});

navButton.addEventListener("keydown", (event) => {
	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
		if (navButton.ariaExpanded === "false") openMenu();
		else closeMenu();
	} else if (event.key === "Tab" && event.shiftKey) closeMenu();
});

/* tab out of menu in either direction */
firstItem.addEventListener("keydown", (e) => {
	if (event.key === "Tab" && event.shiftKey) closeMenu();
});

lastItem.addEventListener("keydown", (e) => {
	if (event.key === "Tab" && !event.shiftKey) closeMenu();
});

/* escape/click away from menu */
document.addEventListener("keydown", (event) => {
	if (event.key === "Escape" && navButton.ariaExpanded === "true") {
		closeMenu();
		navButton.focus();
	}
});

window.addEventListener("click", (e) => {
	if (navButton.ariaExpanded === "true" &&
			!event.target.matches("header nav ul") &&
			!event.target.matches("header nav button")) closeMenu();
})