JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container" onclick="nav()"><div id="nav" class="nav"></div></div>

CSS

.container {width:100%;height:100vh;position:relative;overflow:hidden;background: yellow;z-index:1;}

.nav {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 0;
    right: -300px;
    background: #000;
    z-index:2;
    -webkit-transition: right 0.5s;transition: right 0.5s;
}

/* This is the controls for Santas sledge*/

.open {right:0px;-webkit-transition: right 0.5s;transition: right 0.5s;}

JavaScript

function nav() {
var el = document.getElementById("nav");

if (el.className == "nav") {
el.className = "nav open";
}
else {el.className = "nav";}

}