How to close the side bar automatically when the li item is clicked

const menuButton = document.querySelectorAll("li");
const menuSidebar = document.getElementById("mySidebar");



/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

// console.log(menuButton)
// console.log(mySidebar)
menuButton.addEventListener("click", ()=>{

  menuSidebar.display = "none";
  
  

});

:root {
  --title-font: "Titillium Web", sans-serif;
  --color-primary: #16e0bd;
  --color-secondary: #303030;
  --color-tertiary: #e0860b;
  --color-complimentary: #fc5817;
  --color-darkblack: #141414;
  --default: #ffffff;
}

.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: var(--color-secondary); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--default);
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: var(--color-primary);
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  padding: 10px 15px;
  border: none;

  box-shadow: 3px 3px var(--color-complimentary),
    -0.1em -0.1em 0.4em var(--color-complimentary);
  background: linear-gradient(var(--default), var(--color-primary));
  color: var(--color-secondary);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s; /* If you want a transition effect */
  padding: 20px;
}

   <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
        <li><a href="#about-me">About Me</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#experience">Experience</a></li>
        <li><a href="#education"> Education </a></li>
        <li> <a href="#contact">Contact</a></li>
    </ul>
      </div>
      
      <div id="main">
        <button class="openbtn" onclick="openNav()">&#9776; Open Menu</button>
      </div>