Replacing HTML onclick with eventListener

JavaScript
1

As the title says: I am doing some beginner practice on a very simple menu. Nothing special.
When practicing on menus in the past, I have used the HTML onclick Event attribute to open and close the menu, but I want to try doing this in my js file instead.
I have not been able to find many topics on how to do this, especially not the code I am currently running. I am not even sure WHERE to put the eventListener in my code.
I would be very thankful if someone could guide me.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<nav class="nav-main">
  <div class="btn-toggle-nav"></div>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
    </ul>
</nav>

<aside class="nav-sidebar">
  <ul>
    <li><span>menu1</span></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
  </ul>
</aside>

</body>

<script src="js/main.js"></script>

</html>

body {
  background-color: #f1f1f1;
}
.nav-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  z-index: 1000;
}
.btn-toggle-nav {
  width: 60px;
  height: 100%;
  background-color: #f98f39;
  background-image: url(../icon.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  cursor: pointer;
}
.btn-toggle-nav:hover {
  opacity: 0.7;
}
.nav-main ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
}
.nav-main ul li {
  list-style: none;
  line-height: 30px;
}
.nav-main ul li a {
  display: block;
  height: 100%;
  padding: 0 10px;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
  font-family: arial;
  font-size: 16px;
}
.nav-main ul li a:hover {
  opacity: 0.7;
}
.nav-sidebar {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 50px;
  height: calc(100vh - 60px);
  padding: 0 5px;
  background-color: #1b1b1b;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
}
.nav-sidebar ul {
  padding-top: 15px;
  padding-left: 0;
  overflow: hidden;
  visibility: hidden;
}
.nav-sidebar ul li {
  line-height: 60px;
  list-style: none;
}
.nav-sidebar ul li span, .nav-sidebar ul li a {
  display: block;
  height: 60px;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-family: arial;
  font-size: 16px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.nav-sidebar ul li a:hover {
  background-color: #222;
}


let toggleNavStatus = false;

let toggleNav = function() {
  let getSidebar = document.querySelector(".nav-sidebar");
  let getSidebarUl = document.querySelector(".nav-sidebar ul");
  let getSidebarTtitle = document.querySelector(".nav-sidebar span");
  let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

  if (toggleNavStatus === false) {
    getSidebarUl.style.visibility = "visible";
    getSidebar.style.width = "272px";
    getSidebarTtitle.style.opacity = "0.5";

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      getSidebarLinks[i].style.opacity = "1";
    }

    toggleNavStatus = true;
  }
  else if (toggleNavStatus === true) {
    getSidebar.style.width = "50px";
    getSidebarTtitle.style.opacity = "0";

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      getSidebarLinks[i].style.opacity = "0";
    }

    getSidebarUl.style.visibility = "hidden";

    toggleNavStatus = false;
  }
}