JSFiddle - React, Tailwind, and code Playground

by dhana36

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;
 }
.navbar{
    cursor:pointer;
    color:red;
}

JavaScript

$(function(){
    $('.navbar').on('click', function(){
        $('#sidebar').toggle('slide', { direction: 'left' }, 1000);
        $('#main-content').animate({
            'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
        }, 1000);
    });
});