JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
Home      </a>
    </div>
  </div>
</nav>
<nav class="navbar  bg-primary" style="margin-bottom:0">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
App Menu      </a>
    </div>
  </div>
</nav>



<div class="row-fluid">
  <div class="sidr left" id="collapsePanel">
    <div class="views" style="padding:10px 10px">
    <div class="btn-group" style="padding-bottom:none">
                    <button class="btn btn-default">All Views</button>
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                    <ul class="dropdown-menu" id="myViews">
                      <li><a href="#"><i>Auto Saved</i> </a>
                      </li>
                      <li class="active default"><a href="#"><i class="fa fa-heart fa-white"></i>
                      Dug View 
                      <span class="pull-right">
                      <button class="btn btn-success btn-xs " title="Save Changes?"><i class="fa fa-save"></i>
                      </button><button...

CSS

html,
body,
.row {
  height: 100%;

}
body {padding-top:50px;}
.dropdown-menu {
  width:240px;  
}
.navbar-brand  {
  color:white !important
}
.dataTables_wrapper {
    opacity: .3;
}

.dropdown-menu li .fa-heart {
  margin-left:-5px;
  
}

.views .dropdown-menu li:not(.new-view) .btn, .dropdown-menu li .fa-heart {
  visibility:hidden
}
.dropdown-menu li.default .fa-heart {
  margin-left:-5px;
  visibility:visible
}

.views .dropdown-menu li:hover .fa-heart, .views .dropdown-menu li:hover .btn {
  visibility:visible;
  
}
.#collapsePanel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%
}

.input-group {
  flex: 1 0 50px;
  padding: 10px;
}

.filters {
  overflow: scroll;
  flex: 1 100% 0;
}
.btn-default .badge {
  background-color:#337ab7;
  
}

.dropdown .dropdown-menu {
  position: static;
}

.dropdown.open ul.dropdown-menu {
  float: none;
  border: none;
  box-shadow: none;
  background: transparent;
  border-left: 8px solid #eee
}

#collapsePanel {
  background: #fafafa;
  padding-right: 0
}

li {
  border-bottom: 1px solid #ececec
}

.dropdown-menu>li>a {
  display: block;
  padding: 8px 13px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #337ab7;
  white-space: nowrap;
}

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 2px 2px 15px #ccc;
}

.sidr .sidr-inner {
  padding: 0 0 15px
}

.sidr .sidr-inner>p {
  margin-left: 15px;
  margin-right: 15px
}

.sidr.right {
  left: auto;
  right: -260px
}

.sidr.left {
  left: -260px;
  right: auto
}

.filterCrumb .fa {
  font-size: 8px;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 10px;
}

.label-as-badge {
  border-radius: 1em;
  font-weight: normal;
  padding: 8px;
}

.label-as-badge .fa {
  margin: -15px 0 0 0;
  color: #ffffff;
}

.filters {
  position: absolute;
  width: 265px;
}

label {
  padding: 10px 10px 0 10px
}

code...

JavaScript

$('#collapsePanelBtn').sidr({
       name: 'collapsePanel',
       side: 'left'
   });
   
           (function($) {
				$('#addFilter').on('click', function(e) {e.stopPropagation();});
				})(jQuery);			
    
    	$('#addFilter').click( function() {
            $(this).hide();
            $(this).next().show();
        });
            
      $('#newView').click( function() {
            $('#addFilter').show();
            $('#addNewViewGroup').hide();
        });
        
             $('#otherViews').click( function(e) {
             e.stopPropagation();
             $('#moreviews').show();
             $('#myviews').hide();

});
        
                     $('#showMyViews').click( function(e) {
             e.stopPropagation();
             $('#moreviews').hide();
             $('#myViews').show();
             $(".sidr").animate({ scrollTop: 0 }, "fast");
        });

   $('#ta_filter').keyup(function() {
       var valThis = this.value.toLowerCase(),
           lenght = this.value.length;

       $('.sidr .nav>li>a>span').each(function() {
           var text = $(this).text(),
               textL = text.toLowerCase(),
               htmlR = '<b>' + text.substr(0, lenght) + '</b>' + text.substr(lenght);
           if (textL.indexOf(valThis) == 0) {
               $(this).html(htmlR).closest('li').show();
           } else {
               $(this).closest('li').hide();
           }
       });

   });

   $(".choose_filter").click(function() {
       var text = $(this).find('span').text();
       $('.filter_name ').html(text);
       $(".single_filter").show("slide", {
           direction: "right"
       }, 500);
       //$(".filters").hide("slide", { direction: "left" }, 500);
       $('.filters').animate({
           left: "-265px"
       }, 500);
   });
      $(".choose_date_filter").click(function() {
       var text = $(this).find('span').text();
       $('.filter_name ').html(text);
       $(".single_date_filter").show("slide", {
           direction:...