Lista elementów

Cześć.

Stworzyłem mobilne menu i działa prawie tak jak bym chciał za wyjątkiem jednego szczegółu, chciałbym aby menu znikało kiedy kliknę na jakikolwiek z linków, natomiast menu znika tylko kiedy kliknę pierwszy link, prosiłbym o pomoc, albo o poprawiony kod który by sprawił że po kliknięciu w jakikolwiek link menu zniknie.

<div class="mobile-navigation">
          <div class="hamburger">
            <img src="illustration/undraw_hamburger.png" alt="" />
          </div>
          <div class="sidebar-menu">
            <div class="sidebar-overlay"></div>
            <div class="sidebar">
              <div class="sidebar-title">
                <div class="profile-image">
                  <img src="illustration/Face.png" alt="" />
                </div>
                <div>
                  <h4>Majki Design</h4>
                  <p>Strony Wizytówki</p>
                </div>
              </div>
              <a href="#">
                <div class="sidebar-item">
                  <p>
                    <i class="material-icons">
                      person_pin
                    </i>
                    O Mnie
                  </p>
                </div>
              </a>
              <a href="#serivces">
                <div class="sidebar-item">
                  <p>
                    <i class="material-icons">
                      web
                    </i>
                    Oferta
                  </p>
                </div>
              </a>
              <a href="#">
                <div class="sidebar-item">
                  <p>
                    <i class="material-icons">
                      perm_phone_msg
                    </i>
                    Kontakt
                  </p>
                </div>
              </a>
            </div>
          </div>
        </div>

//SideBar Menu
let SideBar = function() {
  const menu = document.querySelector(".sidebar-menu");
  const hamburger = document.querySelector(".hamburger");
  const overlay = document.querySelector(".sidebar-overlay");
  const sidebarLinks = document.querySelector(".sidebar a");

  hamburger.addEventListener("click", function() {
    menu.classList.add("active");
  });

  overlay.addEventListener("click", function() {
    menu.classList.remove("active");
  });

  sidebarLinks.addEventListener("click", function() {
    menu.classList.remove("active");
  });
};

A coś ci tu w ogóle działa?

Może opisz, co (twoim zdaniem) robią tu poszczególne kawałki kodu.

Edit:

Dobra, już kumam. Pytający będzie uprzejmy załączy listę użytych klas CSS.

const sidebarLinks = document.querySelector(".sidebar a");

Łapie tylko pierwszy element pasujący do wzorca. Potrzebujesz querySelectorAll oraz pętli do obsłużenia wszystkich pozycji odnośnie sidebarLinks.addEventListener.