responsive navbar

Question

what's the problem of this code, can someone help?

const menu = document.querySelector('.menu input');
const nav = document.querySelector('nav ul');

menu.addEventListener('click', fuction() {
nav.classList.toggle("slide");
});

#this is css file
nav ul{
position: absolute;
right: 0;
top: 0;
height: 100vh;
width: 30%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: white;
z-index: -1;
transform: translateX(100%);
transition: all 1s;
}

nav ul.slide{
transform: translateX(0);

#this is html file
<header>
<nav>
<div class="container">
<img src="assets/logo/logo.png" alt="logo" class="logo" width="200px">
<ul>
<li class="button"><a href="#">Login</a></li>
<li class="button"><a href="#bio">Biodata</a></li>
<li class="button"><a href="#about">Tentang Kami</a></li>
<li class="button"><a href="#flex">Produk</a></li>
<li class="button"><a href="#jumbotron">Beranda</a></li>
</ul>

<div class="menu">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>