title: Showing overlay on sidebar menu open
body: <p>I want to show an overlay when then sidebar menu opens.
  And close the menu when the overlay is clicked.</p>
  
  <p>here is what i've done:</p>
  
  <pre><code> $(document).ready(function() {
  
      $('#menu-toggle').click(function(e) {
        e.preventDefault();
        $('#wrapper').toggleClass('toggled');
        $('#overlay').toggle();
      });
  
      $('#overlay').click(function() {
        $('#overlay').hide('200');
        $('#wrapper').removeClass('toggled');
      });
    });
  
  
  #overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background-color: rgba(0,0,0,.5);
  }
  </code></pre>
  
  <p>here is the demo - <a href="https://jsbin.com/vasisedoha/edit?css,js,output" rel="nofollow">https://jsbin.com/vasisedoha/edit?css,js,output</a></p>
  
  <p>my code is working fine.</p>
  
  <p>I'm stuck at making the animation look good. Please help me fix the animation effect.</p>
  
  <p>I want android lollipop, material design type effect.</p>