我做了一个汉堡菜单，除了当我点击我的链接时，它工作得很好。它不会自动关闭菜单，我总是要点击链接，然后通过汉堡按钮关闭菜单。
当我点击一个导航栏链接时，如何关闭整个菜单？
下面是我的codepen：https://codepen.io/Softee/pen/dygGbWy确保处于响应移动的视口中。
谢谢你的帮助。

const menu_btn = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');

menu_btn.addEventListener('click', function () {
    menu_btn.classList.toggle('is-active');
    mobile_menu.classList.toggle('is-active');
});

.hamburger{
    position:relative;
    margin-top: 30px;
    margin-left: 50px;
    display:block;
    width:35px;
    cursor:pointer;
    appearance:none;
    background:none;
    outline:none;
    border:none
}

.hamburger .bar,.hamburger:after,.hamburger:before{
    content:'';
    display:block;
    width:100%;
    height:5px;
    background-color:#1B1B1B;
    margin:6px 0px;
    transition:0.4s
}

.hamburger.is-active:before{
    transform:rotate(-45deg) translate(-8px, 6px);
    background-color: #1B1B1B;
}

.hamburger.is-active:after{
    transform:rotate(45deg) translate(-9px, -8px);
    background-color: #1B1B1B;
}

.hamburger.is-active .bar{
    opacity:0;
}

.mobile-nav{
    position:fixed;
    top:0;
    left:100%;
    width:100%;
    min-height:100vh;
    display:block;
    background: pink;
    padding-top:120px;
    transition:0.4s
}

.mobile-nav.is-active{
    left:0
}

.mobile-nav a{
    font-family: hagincaps;
    font-size: 32px;
    display:block;
    margin:0 auto 16px;
    text-align:center;
    padding:16px 16px;
    color:#1B1B1B;
    text-decoration:none
}

header .nav_container{
    z-index: 8;
    position: fixed;
    height: 100px;
    width: 100%;
    align-items: center;
}

header .nav_container nav{
    padding-top:32px;
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

header .nav_container nav a{
    font-family: hagincaps;
    text-transform: uppercase;
    font-size:28px;
    color:757575;
    text-decoration:none
}

header .nav_container nav a:hover{
    border-bottom: 5px solid white;
    border-radius: 10px;
    color: white;
}

@media (min-width: 768px){
    .mobile-nav{
        display:none
    }
    .hamburger{
        display:none
    }
}

@media (max-width: 767px){
    header .nav_container nav{
        display:none
    }
}

@media (max-width: 855px){
  header .nav_container nav{
    width: 800px;
    margin: 0 auto;
  }
}

<header>
    <div class="nav_container">
      <nav>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
      </nav>

      <button class="hamburger">
    <div class="bar"></div>
      </button>
    </div>
  </header>

  <nav class="mobile-nav">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
  </nav>