JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
    <div class="containerFluid">
      <div class="navbar-header">
        <a 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>
        </a>
      </div>
      <div id="slidemenu">
        <ul class="nav navbar-nav">
          <li><a href="#" data-toggle="collapse" data-target="#sec1">Section 1</a>
            <div class="subMenuDiv">
              <ul class="nav nav-justified collapse" id="sec1">
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 1</span></a></li>
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 2</span></a></li>
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 3</span></a></li>
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 4</span></a></li>
              </ul>
            </div>
          </li>
          <li><a href="#" data-toggle="collapse" data-target="#sec2">Section 2</a>
            <div class="subMenuDiv">
              <ul class="nav nav-justified collapse" id="sec2">
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 1</span></a></li>
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 2</span></a></li>
                <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 3</span></a></li>
                <li><a href="#"...

CSS

.containerFluid {
	  width: 1280px;
	  margin: 0 auto;
	}
	
	@media (max-width:767px) {
	  .subMenuDiv {
	    position: realtive;
	  }
	}
	
	body.slide-active {
	  overflow-x: hidden
	}
	/*first child of #page-content so it doesn't shift around*/
	
	.no-margin-top {
	  margin-top: 0px!important
	}
	
	#slide-nav .navbar-toggle .icon-bar {
	  background: white;
	}
	/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
	
	#page-content {
	  position: relative;
	  padding-top: 70px;
	  left: 0;
	}
	
	#page-content.slide-active {
	  padding-top: 0
	}
	/* put toggle bars on the left :: not using button */
	
	#slide-nav .navbar-toggle {
	  cursor: pointer;
	  position: relative;
	  line-height: 0;
	  float: left;
	  margin: 0;
	  width: 30px;
	  height: 40px;
	  padding: 10px 0 0 0;
	  border: 0;
	  background: transparent;
	}
	/* icon bar prettyup - optional */
	
	#slide-nav .navbar-toggle > .icon-bar {
	  width: 100%;
	  display: block;
	  height: 3px;
	  margin: 5px 0 0 0;
	}
	
	#slide-nav .navbar-toggle.slide-active .icon-bar {
	  background: orange
	}
	
	.navbar-header {
	  position: relative
	}
	
	#page-content {
	  width: 1280px;
	  margin: 0 auto;
	}
	/* un fix the navbar when active so that all the menu items are accessible */
	
	.navbar.navbar-fixed-top.slide-active {
	  position: relative
	}
	
	@media (max-width:767px) {
	  #slide-nav .container {
	    margin: 0!important;
	    padding: 0!important;
	    height: 100%;
	  }
	  #slide-nav .navbar-header {
	    margin: 0 auto;
	    padding: 0 15px;
	  }
	  #slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	  }
	  #slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 80%;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
	  }
	  #slide-nav #slidemenu .navbar-nav {
	    min-width: 0;
	    width: 100%;
	   ...

JavaScript

$(document).ready(function () {

    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
  
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));  

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {

        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });


        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');


        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


    });


    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


    $(window).on("resize", function () {

        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }


    });

});