<div class="wrapper">
  <div class="hamburger js-hamburger">
    <span></span>
  </div>
  <nav id="nav" class="nav js-nav">
    <ul class="navList">
      <li class="navItem"><a href="#">ABOUT</a></li>
      <li class="navItem"><a href="#">WORKS</a></li>
      <li class="navItem"><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #fff;
}

.nav {
  height: 100%;
  padding: 60px 30px;
  background-color: #333;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;

  &.is-active {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
  }

  .navList {
    display: grid;
    row-gap: 45px;
  }

  .navItem {
    a {
      display: block;
      font-size: 1.25rem;
      letter-spacing: 0.03em;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      transition: opacity 0.3s ease;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.hamburger {
  display: grid;
  place-content: center;
  background-color: #333;
  width: 80px;
  height: 80px;
  position: absolute;
  inset: 0;
  margin: auto;
  cursor: pointer;

  &.is-active {
    &::before {
      margin-bottom: -4px;
      rotate: 45deg;
    }

    &::after {
      margin-top: -4px;
      rotate: -45deg;
    }

    > span {
      opacity: 0;
    }
  }

  &::before,
  &::after,
  > span {
    display: block;
    width: 50px;
    height: 4px;
    background-color: #fff;
    transition: opacity 0.3s ease-in-out;
  }

  &::before,
  &::after {
    content: "";
    will-change: rotate, margin;
    transition: rotate 0.3s ease-in-out, margin 0.3s ease-in-out;
  }

  &::before {
    margin-bottom: 10px;
  }

  &::after {
    margin-top: 10px;
  }
}

const hamburger = document.querySelector(".js-hamburger");
const nav = document.querySelector('.js-nav')

if (hamburger && nav) {
  hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("is-active");
     nav.classList.toggle("is-active");
  });
}