How do I use JavaScript to Open and Close the navigation links when one clicks on the menu icon

I have a navigation bar and I am using media query for the responsiveness.
Please how do I use JavaScript to open and close the navigation links (< a >) when one clicks on the Menu icon on small devices?
My code is below:

<!-------HTML----------->
<nav>
      <a href="#" class="active"> Home </a>
      <a href="#"> Product </a>
      <a href="#"> Branches </a>
      <a href="#"> About </a>
      <a href="#"> Contact </a>
      <a href="#" class="menu" onclick = "menu()"> Menu </a>
</nav>
/*-------------------CSS--------------------------*/
nav{
	background-color:royalblue;
	margin:0px;
	padding:0px 5px;
}

nav a{
	display:inline-block;
	color:#fff;
	font-size:17px;
	font-family:sans-serif;
	text-decoration:none;
	padding:30px 20px;
}

a.active{
	background-color:#fff;
	color:royalblue;
}

a.menu{
	float:right;
	margin-right:5px;
}

a:hover{
	background-color:#fff;
	color:royalblue;
}
/*----------------------Media Query(Small Screens)-----------------------*
@media only screen and (max-width:600px){
	nav a:not(.menu){
		display:none;
	}
}
// I tried using the below JavaScript code but didn't work
function menu(){
	let openMenu = document.getElementsByTagName('a');
	openMenu.style.display ='block';
}

I am facing two problems now:

  1. When the screen width is below 600px, the navigation bar (< nav >) completely vanishes unless I set the property overflow:hidden to the < nav > element in the CSS code before it’ll remain visible and I don’t understand why.

  2. I want to use JavaScript to open and close the navigation links (< a >) when I click on the Menu.

This is the image of when the screen is less than 600px
navigation bar

Please, I need your help.