JSFiddle - React, Tailwind, and code Playground

by mzmmohideen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<body class="closebtn">
<div id="mySidenav" class="sidenav">
  <a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <div class="centerFlex" id="left_icon">
    <i class="fa fa-chevron-right" style="font-size:50px"></i>
  </div>
</div>

<script>
function openNav() {
    document.getElementById("main").style.marginLeft = "35px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>
     
</body>

CSS

.right-semi-circle {
  background: #9e978e;
  height: 90px;
  width: 45px;
  border-bottom-right-radius: 90px;
  border-top-right-radius: 90px;
}

.centerFlex {
  position:absolute;
  top:50%;
  left:0%;
  cursor:pointer;
  transition: transform 0.3s;
}

.centerFlex:hover {
  transform: rotate(-180deg);
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .2s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

JavaScript

(function(){
	$(".centerFlex").hover(function() {
  	 $(".centerFlex").on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    $("#mySidenav").css('width', '75px');
    $(".centerFlex").css('margin-left', '73px');
});
  })
  $("#mySidenav").mouseleave(function() {
  		$("#mySidenav").css('width', '0');
      $(".centerFlex").css('margin-left', '0');
  })
})($)