title: add and remove classes that toggle open and close full screen navigation
body: <p>I'm currently working on a full screen navigation menu that opens when I click the hamburger icon. Right now I am able to toggle the navigation by adding a class called "open" that triggers when I click on the menu. But I am stuck when it comes to closing it. Could you review my code and let me know what I'm missing? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$(document).ready(function() {
      $('#menu').on('click', function() {
         $('.overlay').addClass('open');
         $('#menu').removeClass('open-menu');
         $('#menu').addClass('close-menu');
      });
     
      $('.#menu').on('click', function() {
        $('.overlay').removeClass('open');
        $('#menu').addClass('open-menu');
        $('#menu').removeClass('close-menu');
      });
    });</code></pre>
  </div>
  </div>
  </p>