Problem z Menu rozwijanym po kliknięciu

pytanie zadane 26 sierpnia 2017 w JavaScript przez Mateusz Patalan Bywalec (2,140 p.)

Postanowiłem stworzyć rozwijane menu. W tym celu, użyłem funkcji addEventListener - cały kod jest na dole. Chciałbym aby po kolejnym kliknięciu menu się zamknęło. Czy ktoś wie jak to zrobić?

var menu = document.getElementById("icon");
		menu.addEventListener("click", updateValue);
		window.addEventListener("click", updateValueT);
		
		
		function updateValue ()
		{
			document.documentElement.style.setProperty("--display", "block");
			
		}
		function updateValueT ()
		{
			document.documentElement.style.setProperty("--display", "none");
			
		}

	<header class="header">
		<div class="logo">
			<h1><a href="#">TaStronka</a></h1>
		</div>
		
		<nav class="menu">
			<span>
				<i class="icon-menu" id="icon"></i>
				<ul>
					<li><a href="#">Pozycja 1</a></li>
					<li><a href="#">Pozycja 2</a></li>
					<li><a href="#">Pozycja 3</a></li>
					<li><a href="#">Pozycja 4</a></li>
				</ul>
			</span>
		</nav>
	</header>

:root
{
	--display: none;
}
body
{
	font-family: "Roboto", sans-serif;
	margin: 0 !important;
}
.header
{
	background:#1757EF;
	color:#fff;
	position:fixed;
	width:100%;
}
.logo
{
	display:inline-block;
	width:90%;
}
.logo h1
{
	margin:0;
	padding:15px;
	font-size:50px;
}
.logo a
{
	text-decoration:none;
	color:#fff;
}
.menu
{
	display:inline-block;
}
.menu span
{
	display:block;
	font-size:50px;
	padding:15px 0 15px 0;
	position:relative;
}
.menu ul
{
	position:absolute;
	top:15;
	right:0;
	margin:0;
	padding:0;
	list-style:none;
	font-size:35px;
	background:#fff;
	padding:15px;
	width:200px;
	border: 1px solid #000;
	border-radius:5px;
	display: var(--display);
}
.menu a
{
	text-decoration:none;
	color:#222;
	transition: all 0.4s;
}
.menu a:hover
{
	color:#1757EF;
}