/**
 * Open the menu, when click on the menu header button
 */

var menuOpened = false;

function toggleMenu() {
	
	var nav =  document.querySelector("header nav");
	var menu = document.querySelector("header nav ul");
	
	var maxHeight = (menu.childElementCount * 3.25 + 1) + "rem";

	if (!menuOpened) {
		
		menuOpened = true;
		
		nav.style.height = "100vh";
		nav.style.width = "100vw";
		nav.style.backgroundColor = "hsla(0, 0%, 0%, 0.75)";
		
		menu.style.opacity = "1";
		menu.style.height = maxHeight;

	} else {
		
		menuOpened = false;
		
		menu.style.opacity = "0";
		menu.style.height = "0rem";
		
		nav.style.backgroundColor = "transparent";
		nav.style.height = "auto";
		nav.style.width = "auto";
	}
}

document.querySelector("header nav button").addEventListener("click", toggleMenu);