JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="links">

<a href="#" onclick="openBox()">open</a>
<a href="#" onclick="closeBox()">close</a>

</div>



<div id="nav" class="nav"><div id="but" class="but"></div>
</div>


</div>

CSS

body {background-color:#eeeeee;margin:0;}

.container {max-width:400px;margin:auto;}

.links {position:fixed;left:0;display:block;}

.but {position:absolute;right:-11px; top:25px;background-color:#eeeeee;width:20px;height:20px;border-radius:50%;border:1px solid #bbbbbb;}

.nav {position:relative;width:0px;background-color:#444444;height: 100vh;border:#cccccc solid;border-width:0 1px 0 0;transition: width 0.5s;transition-timing-function: ease-out;
    -webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);
    box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);
}

.nav2 {position:relative; width: 400px; background-color: #444444; height: 100vh; transition: width 0.5s;transition-timing-function: ease-out; 
    -webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);
    box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.75), inset -25px 0px 25px -25px rgba(0, 0, 0, 0.75);


}

JavaScript

function openBox() {

  var nav = document.getElementById('nav');
  
  nav.className = "nav2";

}

function closeBox() {

  var nav = document.getElementById('nav');
  
  nav.className = "nav";

}