Close menu when link is clicked

I have an off-canvas menu that flies out when a toggle-button is clicked - so far so good. All menu links share the same class name (in this case .nav-link). I need the menu to close when any of the links are clicked, I think have selected them all and I think I have to loop through an array of the selection but I'm unsure implement it. Right now nothing happens when a link is clicked.

My HTML:

<ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">articles</a></li><li class="nav-item"><a href="#" class="nav-link">tags</a></li><li class="nav-item"><a href="#" class="nav-link">links</a></li><li class="nav-item"><a href="#" class="nav-link">archive</a></li></ul>

My CSS:

.nav-list {    margin: 0;    margin-top: 3.2em;    padding: 0;    background: #777;    width: 100%;    transform: translateX(-100%);    transition: transform 300ms cubic-bezier(.5, 0, .5, 1);}

My JS:

const navToggle = document.querySelector('.nav-toggle')const navLink = document.querySelectorAll('.nav-link')navToggle.addEventListener('click', () => {    document.body.classList.toggle('nav-open')})navLink.addEventListener('click', () => {    document.body.classList.remove('nav-open')})