JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="navbar">Click Here To Toggle</div>
 <div id="sidebar">sidebar content here</div>
 <section id="main-content">main page content here</section>

CSS

#sidebar {
  width: 210px;
  height: 100%;
  position: fixed;
  background: #2a3542;
 }

 #main-content {
  margin-left: 210px;
    position :relative;
 }
.navbar{
    cursor:pointer;
    color:red;
}

JavaScript

$(function(){
    $('.navbar').on('click', function(){
        if( $('#sidebar').is(':visible') ) {
            $('#sidebar').animate({ 'width': '0px' }, 'slow', function(){
                $('#sidebar').hide();
            });
            $('#main-content').animate({ 'margin-left': '0px' }, 'slow');
        }
        else {
            $('#sidebar').show();
            $('#sidebar').animate({ 'width': '210px' }, 'slow');
            $('#main-content').animate({ 'margin-left': '210px' }, 'slow');
        }
    });
});