<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;
}

window.addEventListener("click", function(e){
  const drawer = document.querySelector('#drawer');

    // Ensure the drawer is *inert* when closed
    drawer.inert = drawer.inert ? false : true;
    document.querySelector('#drawerStatus').innerHTML = drawer.inert;

    drawer.classList.toggle('drawer-closed');
    

});