我不知道为什么我的汉堡菜单不起作用

Question

我不知道为什么我的汉堡菜单不起作用。这是site和GitHub repo的链接。

let MainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");

navBarToggle.addEventListener("click", function() {
  MainNav.classList.toggle("active");
});

.header-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Dancing Script';
  text-align: center;
  background-color: #3d3c38;
  color: #f5f4f2;
  grid-row-start: 1;
  grid-row-end: 2;
  font-weight: lighter;
}

.header-title {
  font-size: 1.5rem;
  justify-self: flex-start;
  align-self: center;
  margin: 0;
  padding: 0;
}

.header-nav {
  justify-self: center;
  align-self: center;
  font-size: 2.5em;
  margin-top: 7rem;
}

.header-nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.header-nav a {
  text-decoration: none;
  color: #f5f4f2;
}

.navbar-toggle {
  display: none;
}

.active {
  display: block;
}

.media-icons {
  justify-self: flex-end;
  margin-bottom: 2rem;
  margin-top: auto;
  align-self: center;
}

.media-icons i {
  margin-left: .5rem;
}

.media-icons p {
  font-size: 2em;
  margin: 0;
  margin-bottom: .5rem;
}

.header-name1,
.header-name2 {
  margin: 0 .5rem;
  font-weight: normal;
}

.header-image {
  width: 15rem;
  height: 12rem;
  border: none;
  justify-self: flex-start;
  align-self: center;
  border-radius: 50%;
  margin-top: 1rem;
  transform: scale(1, 1);
  object-fit: cover;
}

@media only screen and (max-width: 900px) {
  .site-container {
    grid-template-columns: 1fr;
    grid-template-areas: "header-container" "main-container";
  }

  .header-container {
    display: flex;
    flex-direction: row;
    margin-left: .8rem;
    margin-right: .5rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    background: white;
    color: black;
    height: 1.5rem;
  }

  .header-image {
    display: none;
  }

  .header-name1,
  .header-name2 {
    display: none;
  }

  .header-container p {
    display: none;
  }

  .navbar-toggle {
    display: initial;
    margin-right: auto;
    align-self: center;
    cursor: pointer;
    font-size: 150%;
  }

  .Navbar__ToggleShow {
    display: block;
  }

  .header-nav {
    margin-top: 1rem;
  }

  .main-nav {
    display: flex;
    flex-direction: row;
    margin-right: auto;
    display: none;
  }

  .media-icons {
    margin-left: auto;
    font-size: 75%;
    align-self: center;
    margin-bottom: 0;
    margin-top: 0;
  }
}

<div class="site-container">
  <header class="header-container">
    <img src="pictures/IMG_2535.JPG" alt="header-image" class="header-image">
    <div class="header-title">
      <h1 class="header-name1">Manny Ramos</h1>
      <h2 class="header-name2">Photography</h2>
    </div>

    <nav class="header-nav">
      <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fas fa-bars"></i>
      </span>
      <ul class="main-nav" id="js-menu">
        <li><a href="#" class="nav-links">home.</a></li>
        <li><a href="#" class="nav-links">portfolio.</a></li>
        <li><a href="#" class="nav-links">about me.</a></li>
      </ul>
    </nav>
    <div class="media-icons">
      <p class="email">[email protected]</p>
      <p class="phone-number">[phone]</p>
      <i class="fab fa-instagram icons fa-3x"></i>
      <i class="icon fas fa-underline icons fa-3x"></i>
    </div>
  </header>
</div>