<div class="parent blue">
  <div id="drawer" class="section yellow">
    <h2>Drawer</h2>
    <p>Click anywhere to toggle open/close.</p>
  </div>
  <code class="box">
    drawer.inert = 
    <span id="drawerStatus">false</span>
  </code>
</div>

* {
	margin: 0;
	padding: 0;
}

#drawer {
	width: 25%;
	height: 100vh;
  text-align: center;
	margin-left: 0px;
	margin-right: 2rem;
	float: left;
	box-shadow: 0px 0px 5px grey;
}

#drawer.drawer-closed {
	margin-left: -102%;
}

.box {
  margin: 2rem;
}

$(function() {
  $('body').click(function() {
    const drawer = $('#drawer')[0];

    // Ensure the drawer is *inert* when closed
    drawer.inert = drawer.inert ? false : true;
    $('#drawerStatus').html(`${drawer.inert}`);

    $('#drawer').toggleClass('drawer-closed','normal');
    return false;
  });
});