JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>

CSS

.headbar {
  width: 100%;
  background: #303030;
  background-repeat: repeat;
  background-size: 38px 133px;
  height: 40px;
  background-position: 0px 39px;
  box-shadow: 0px 1px 5px;
  position: fixed;
  z-index: 1000;
  margin-top: -40px;
}

.leftside {
  position: fixed;
  left: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.rightside {
  position: fixed;
  right: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.scrollable {
  position: relative;
  top: 20px;
  min-height: 700px;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0px 1px 5px;
  background: white;
}

/* ===================== */
/* expanded transition
/* ===================== */

.leftside, .rightside, .scrollable {
  transition:0.3s;
}

body.expanded .scrollable {
  width:100%;
}

body.expanded .leftside {
  left: -100%;
}

body.expanded .rightside {
  right: -100%;
}

JavaScript

$(document).ready(function() {

  $('body').on('click', '.headbar', function(){
  	$('body').toggleClass('expanded');
  });

/*
  $('.headbar').click(function() {
    $(".leftside").animate({
      width: 'toggle'
    });
    $(".rightside").animate({
      width: "toggle"
    }, 300, function() {
      $(".scrollable").animate({
        width: '1200px'
      });
    });
  });
 */
 
  
});