Как дописать close для меню

var $btn = document.getElementById('show');
var $nav = document.getElementById('nav');
var $close = document.getElementById('nav');

$btn.addEventListener('click', function() {
  $nav.classList.toggle('active');
});
$close.addEventListener('click', function() {
  $nav.classList.remove('active');
});

#show {
  background-color: #7c7fe0;
  border: 0;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.navigation {
  position: fixed;
  width: 300px;
  height: 100%;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
  left: 0;
}

.navigation.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.navigation.active .navigation__inner {
  background-color: #7c7fe0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: background-color 0s linear 599ms, -webkit-transform 300ms linear;
  transition: background-color 0s linear 599ms, -webkit-transform 300ms linear;
  transition: transform 300ms linear, background-color 0s linear 599ms;
  transition: transform 300ms linear, background-color 0s linear 599ms, -webkit-transform 300ms linear;
}

.navigation.active .navigation__inner:after {
  width: 300%;
  border-radius: 50%;
  -webkit-animation: elastic 150ms ease 300.5ms both;
  animation: elastic 150ms ease 300.5ms both;
}

.navigation__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 999999;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transition: background-color 0s linear 300ms, -webkit-transform 300ms linear;
  transition: background-color 0s linear 300ms, -webkit-transform 300ms linear;
  transition: transform 300ms linear, background-color 0s linear 300ms;
  transition: transform 300ms linear, background-color 0s linear 300ms, -webkit-transform 300ms linear;
}

.navigation__inner:after {
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #7c7fe0;
  border-radius: 50%;
  z-index: -1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

@-webkit-keyframes elastic {
  0% {
    border-radius: 50%;
  }
  45% {
    border-radius: 0;
  }
  65% {
    border-top-right-radius: 40px 50%;
    border-bottom-right-radius: 40px 50%;
  }
  80% {
    border-radius: 0;
  }
  90% {
    border-top-right-radius: 20px 50%;
    border-bottom-right-radius: 20px 50%;
  }
  100% {
    border-radius: 0;
  }
}

@keyframes elastic {
  0% {
    border-radius: 50%;
  }
  45% {
    border-radius: 0;
  }
  65% {
    border-top-right-radius: 40px 50%;
    border-bottom-right-radius: 40px 50%;
  }
  80% {
    border-radius: 0;
  }
  90% {
    border-top-right-radius: 20px 50%;
    border-bottom-right-radius: 20px 50%;
  }
  100% {
    border-radius: 0;
  }
}

#close {
  z-index: 9999999;
  position: absolute;
  overflow: hidden;
  top: 4px;
  right: 6px;
  width: 32px;
  height: 32px;
  transition: transform 0.6s;
  cursor: pointer;
}

#close:hover {
  transform: rotate(360deg);
}

#close::before,
#close::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #ffffff;
}

#close::before {
  transform: rotate(45deg);
}

#close::after {
  transform: rotate(-45deg);
}

<div id="nav" class="navigation">
  <div class="navigation__inner">
    <!--   Content   -->
  </div>
  <div id="close"></div>
</div>
<button id="show">Toggle Menu</button>