JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="wrapper row-offcanvas">
  <div class="navbar navbar-static-top navbar-default">
   
 <button id="toggle" type="button" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-4 sidebar-offcanvas">
        <div id="sidebar"></div>
      </div>
      <div class="col-xs-12 col-sm-8">
        <p>...</p>
      </div>
    </div>
  </div>
</div>

CSS

p {

    height:100px;
    width: auto;
    background-color:red;

}
#sidebar{

    height:100px;
    width: auto;
    background-color:blue;

}
/* hide the horizontal scrollbar */
html {
  overflow-x: hidden;
}

/* make all parent containers 100% height */
html, body, .wrapper {
  height: 100%;
}

/* move the toggle button to the left and give it
   some breathing room */
.navbar-toggle {
  float: left;
  margin-left: 10px;
}

@media screen and (max-width: 767px) {

  /* outer div */
  .row-offcanvas {
    position: relative;
    left: 0;
    -webkit-transition: left .3s ease-in;
    -most-transition: left .3s ease-in;
    transition: left .3s ease-in;
  }

  /* sidebar */
  .sidebar-offcanvas {
    left: -80%;
    width: 80%;
    position: absolute;
    top: 0;
    height: 100%;
    background-color: #F7F7F7;
    padding: 0px;
  }

  /* content */
  .row-offcanvas.active {
    left: 80%;
  }

  /* Make the menu headers the same size as the
     bootstrap navbar */
  [data-role='panelbar'] .k-header {
    min-height: 50px;
  }
}

JavaScript

// handle the #toggle click event
    $("#toggle").on("click", function() {
      // apply/remove the active class to the row-offcanvas element
      $(".row-offcanvas").toggleClass("active");
    });
 $('#sidebar').on("click", function() {
      // apply/remove the active class to the row-offcanvas element
      $(".row-offcanvas").toggleClass("active");
    });