JSで🍔バーページ内リンク時移動するけどメニュー一覧消えない。

間違いサンプルコード

---htmlファイル-----
<div class="overlay">
    <span class="material-symbols-outlined" id="close">close</span>
    <nav>
      <ul>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#address">Shop</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </nav>
    <div>
      <img src="img/logo.png">
    </div>
  </div>

※こちらのコードでopenアイコンクリック時メニューが出てくる画面になります。

---cssファイル-----
header {
  display: flex;
  padding: 0 15px;
  height: 70px;
  background-color: #111;

  h1 img {
    width: 70px;
    height: 70px;
  }

  .sp-menu {
    margin-left: auto;

/*openアイコン*/
    #open {
      font-size: 35px;
      font-weight: lighter;
      line-height: 64px;
      cursor: pointer;
      color: #fc0fc0;
    }
  }
/*hideを追加されたものは全て消える*/
  .hide {
    display: none;
  }
}
　/*SP画面のopenアイコンクリック時画面全体に隠してたoverlayとcloseアイコンを表示*/
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("img/ネオン１.jpeg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;

  #close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 32px;
    cursor: pointer;
    color: #fc0fc0;
  }

  ul {
    list-style-type: none;
  }

  li {
    margin-top: 24px;
    opacity: 0;
    transition: opacity .3s, transfrom .3s;

    a {
      color: #f2f2f2;
      text-decoration: none;
    }
  }

  img{
    padding-top: 72px;
    width: 135px;
    height: 135px;
  }
}


.overlay.show {
  opacity: 1;
  pointer-events: auto;
  display: block;

　/*各リストを遅延させて表示*/
  li {
    opacity: 1;
    transform: none;
  }

  li:nth-child(1) {
    transition-delay: .1s;
  }

  li:nth-child(2) {
    transition-delay: .2s;
  }

  li:nth-child(3) {
    transition-delay: .3s;
  }

  li:nth-child(4) {
    transition-delay: .4s;
  }

  img {
    padding-top: 72px;
    width: 135px;
    height: 135px;
  }
}

.pc-menu {
  display: none;　　/*PCメニューを消す*/
}

※こちらのコードでJSで操作されてCSSでopen時の動作(overlayとcloseアイコンを表示させたり)しています。

{
//open , closeアイコンにoverlayを取得
  const open = document.querySelector('#open');
  const overlay = document.querySelector('.overlay');
  const close = document.querySelector('#close');

//openクリック時overlayをshowで表示！openは隠す
  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });
// closeクリック時overlayを隠す！openは表示
  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

通常ここまではいける人が多いですがこれだけではSPのサイズでハンバーガーメニューを表示させてページ内リンク機能のリンククリックしても移動するがoverlayは消えていない。。

Overlayが消えない解決方法

const overlayLinks = document.querySelectorAll('.overlay nav ul li a'); // ハンバーガーメニュー内のリンクを取得

 overlayLinks.forEach(link => {
    link.addEventListener('click', () => {
      overlay.classList.remove('show');
      open.classList.remove('hide');
    });
  });

この二つを加えるのみで解決できました！！
まず
const overlayLinks = document.querySelectorAll('.overlay nav ul li a');
こちらのコードで.overlayの中のaタグリンクを取得してoverlayLinksという定数に置き換える！

その後forEachで単数系のlinkに書き換えclickの動作としてoverlayの表示を消す。openアイコンも表示する

この様にすればハンバーガーバー内のリンクをクリックしても思う様に動作します！