[ASK] Lagi Bikin Animasi Burger Menu dengan CSS + JS

sebenernya uda berhasil sih, tapi ada kurang sedikit

bisa dilihat disini <a href=' https://codepen.io/naufalhfzhn/pen/OjvZXj '> https://codepen.io/naufalhfzhn/pen/OjvZXj </a>

masalahnya pada bagian burgernya, untuk mendapatkan jarak yg sama bukannya angkanya sama terus kita tinggal bikin angkanya negatif atau positif ? tapi kenapa saya harus ubah angkanya juga.

.burger{
  position: absolute;
  left: 50%;top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 5px;
  background-color: #fff;
  transition: .5s ease-in-out;
}
.burger::before{
  content: '';
  position: absolute;
  left: 0;top:-12px; /*ini kenapa top nya bisa beda angkanya ? */
  display: block;
  width: 100%;
  height: 0;
  border-top: 8px solid #fff;
  border-radius: 10px 10px 0 0;
  transition: .5s ease-in-out;
}
.burger::after{
  content: '';
  position: absolute;
  left: 0;top:9px; /*ini kenapa top nya bisa beda angkanya ? */
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 8px solid #fff;
  border-radius: 0 0 10px 10px;
  transition:  .5s ease-in-out;
}

terus saya mau bikin event click.window, jadi pas saya klik window nav,burger balik ke semula. nah cara biar deteksi click window kecuali si burger button nya itu gmn ya ?

mohon solusinya bang maaf kalo kebanyakan dan kurang jelas terimakasih