JSFiddle - React, Tailwind, and code Playground

Sheet view With Sidebar

by chrischilcoat

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="//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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
Global NavBar FPO   </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 Nav bar  FPO     </a>
    </div>
  </div>
</nav>
<div class="row-fluid">
  <div class="sidr left" id="collapsePanel">
    <div class="filters">
      <ul class="nav navList bs-docs-sidenav" style="padding-top:0">
        <li class="back_filter"><a href="#stay"><i class="fa fa-chevron-left"></i><!-- react-text: 1349 -->&nbsp; Back to Filters<!-- /react-text --></a></li>
        <li><div class="form-group"><label>Group By Rank</label></div><div class="btn-group input-group" id="toggle_event_editing"><button class="btn btn-primary " title=""><span class="">OFF</span></button><button class="btn btn-default " title=""><span class="">ON</span></button></div></li>
        <li><div class="form-group"><label>Filter By Rank</label><div><div class="form-control-value"><ul class="list-unstyled list-inline"></ul><div class="input-group"><span class="input-group-addon dropdown"...

CSS

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

.navList li .fa-heart {
  visibility: hidden;
}

.navList li:hover .fa-heart {
  visibility: visible;
}
.navList li .btn-xs {
  visibility: hidden;
}

.navList li:hover .btn-xs {
  visibility: visible;
}

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 {
 ...

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_view").click(function() {
     $(".viewList").show("slide", {
       direction: "right"
     }, 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: "right"
     }, 500);
    ...