ハンバーガーメニュー,ドロワーメニューの作成（JavaScript）アドバイス頂きたいです。

１、考え方
　・HTMLにJavaScriptで("active")classを付加する
　・classが付加されると、CSSでアニメーションをつける
２，記述

①html
　　・ハンバーガーの三本線は<a>タグで空の<div></div>を囲む
　　・<nav id="drawer">の中にメニューの中身を書く
　　・<div id="curtain">を<header>のそとに記述し、隙間なくカーテンで覆う

　
  <body>
    <div class="curtain" id="curtain"></div>
    <header>
      <a class="hamburger" id="hamburger">
        <div></div>
        <div></div>
        <div></div>
      </a>
      <nav id="drawer">
        <ul>
          <li><a href="#">manu1</a></li>
          <li><a href="#">manu2</a></li>
          <li><a href="#">manu3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>ハンバーガーメニュー・ドロワーメニューの作り方</h1>
    </main>
    <script src="script.js"></script>
  </body>
</html>



②CSS

//全体のスタイルを整える記述。
@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

*, * ::before, *::after{
  box-sizing: border-box;
}

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

main {
  height: 200vh;
  background-color: #c9cece;
}

//ハンバーガーの全体のスタイル、トップに固定してついてくるようにしました。
.hamburger {
  display: block;
  height: 80px;
  width: 80pX;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
}

//ハンバーガーの三本線のスタイル、上下中央揃え
.hamburger div {
  height: 1px;
  width: 60%;
  background: #cc47d1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .3s;
}
//ハンバーガーの上の線の位置

.hamburger  div:nth-of-type(1) {
  transform: translate(-50%,-15px);
}

//ハンバーガーの下の線の位置

.hamburger  div:nth-of-type(3) {
  transform: translate(-50%,15px);
}
//.acitveがついたときのアニメーション
.hamburger .active div:nth-of-type(1) {
  transform: rotate(45deg) translate(-50%,0px);
  transform-origin: 0% 50%;
}

.hamburger .active div:nth-of-type(2) {
  opacity: 0;
}

.hamburger .active div:nth-of-type(3) {
  transform: rotate(-45deg) translate(-50%,0px);
  transform-origin: 0% 50%;
}

//ドロワーの中身
#drawer {
  opacity: 0;
  transform: translateX(100%);
  transition: .3s;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #d1cc47;
  width: 300px;
  height: 500px;
  padding: 200px 0 100px;
  z-index: 2;
  overflow: auto;
  height: 100vh;
  max-height: 100vh;
  box-shadow: 0 0 10px black;
}

#drawer ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#drawer ul li:not(:first-of-type) {
  margin-top: 20px;
}

#drawer.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0%);
}
//ドロワーが開くと画面を覆うカーテンのようなもの
.curtain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #48d1cc;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.curtain.active {
  opacity: 0.7;
  visibility: visible;
}

③JavaScript

//ドキュメントをすべて読みこんだ後にid="hamburger"、id="drawer",id="curtain"クリックするとclass="active"が付与せれます。

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("hamburger").addEventListener("click", () => {
    document.getElementById("hamburger").classList.toggle("active");
    document.getElementById("drawer").classList.toggle("active");
    document.getElementById("curtain").classList.toggle("active");
  });
  document.getElementById("drawer").addEventListener("click", () => {
    document.getElementById("hamburger").classList.toggle("active");
    document.getElementById("drawer").classList.toggle("active");
    document.getElementById("curtain").classList.toggle("active");
  });

  document.getElementById("curtain").addEventListener("click", () => {
    document.getElementById("hamburger").classList.toggle("active");
    document.getElementById("drawer").classList.toggle("active");
    document.getElementById("curtain").classList.toggle("active");
  });
});


３，まとめ

始めての投稿で長くなってすみません。いろいろなサイトや動画を参考にしながらJavaScriptを学んでいます。
2点アドバイス頂けるとありがたいです。
①記事を書いている際にでハンバーガーの✕になるアニメーションの動きが何かに引っかかるようになってしいました。コードもチェックしましたが、原因が分かりませんでした。
②JavaScriptをもっと短いコードで書き換える方法があれば教えて頂きたいです。

よろしくお願いいたします。