JSFiddle - React, Tailwind, and code Playground

Sheet view With Sidebar

by Meredith Crow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://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://yakabod.yakabox.com/css/scss/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">

          <div id="ybx-yakabox-site-search">
            <div data-reactroot="" class=" undefined">
              <form id="quickSearchForm999" name="SearchForm" action="/search/" method="POST"><input type="hidden" id="SearchData_BaseSearchRequirements" name="SearchData[BaseSearchRequirements]" value=""><input type="hidden" id="SearchData_RecordLimit" name="SearchData[RecordLimit]" value=""><input type="hidden" id="SearchData_StartRecord"
                  name="SearchData[StartRecord]" value=""><input type="hidden" id="SearchData_Sort_Field" name="SearchData[Sort][Field]" value=""><input type="hidden" id="SearchData_Sort_Direction"...

CSS

.ui-yakabox-appNav #collapseApp {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding-right: 0;
	padding-top: 20px;
	width: 265px;
}

.ui-yakabox-appNav .app_menu {
  flex: 1 100% 0;
}

.ui-yakabox-appNav .sidr {
  display: block;
  top: 0;
  height: 100%;
  z-index: 999999;
  overflow-x: hidden;
  overflow-y: auto;
  position:fixed;
}

.ui-yakabox-appNav .sidr.right {
  left: auto;
  right: -265px;
}

.ui-yakabox-appNav .sidr.left {
  right: auto;
}

.ui-yakabox-appNav .app_menu {
  position: absolute;
  width: 265px;
}

.ui-yakabox-appNav #collapseColumns {
  background: #fafafa;
  top: 4em;
  left: 0;
  right: 0;
  padding: 15px;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  position: static;
  z-index: 1000;
  margin-top: 10px;
}

.ui-yakabox-appNav {
  background: #337AB7;
  color: white;
  padding: 20px;
  height: 300px;
}

.ui-yakabox-appNav .ui-yakabox-icon-link,
.ui-yakabox-appNav .ui-yakabox-link {
  color: #fff;
	    
			margin-bottom: 10px;
			margin-top: 10px;
}

.ui-yakabox-appNav .ui-app-banner-description {
  max-height: 150px;
  text-overflow: ellipsis;
  overflow: auto;
  font-size: 18px;
}

.ui-yakabox-appNav .fa-fw {
  width: 2.5em;
}

.ui-yakabox-appNav .back_filter{
	
}

.ui-yakabox-appNav .badge {
  font-family: "Open Sans", "Helvetica 		Neue", Helvetica, Arial, sans-serif;
  margin-left: -7px !important;
  background-color: #d9534f !important;
  color: #fff !important;
  position: unset !important;
}

.ui-yakabox-appNav .btn-primary {
  margin-top: 0px;
  text-align: left;
  padding: 10px;
  width: 100%;
}

.navbar-inverse .navbar-nav>.active {
  color: #fff;
  background-color: #090909;
}

.carousel-control {
  width: 1%;
}

.carousel .left>i,
.carousel .right>i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel .right>i {
  left: auto;
  right: 20px;
}

.ui-theme-5.ui-yakabox-appNav {
  background:...

JavaScript

$('#collapsePanelBtn').sidr( {
     name: 'collapseApp',
     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_apps").click(function() {
     var text = $(this).find('span').text();
     $('.filter_name ').html(text);
     $(".apps_menu").show("slide", {
       direction: "right"
     }, 500);
     //$(".app_menu").hide("slide", { direction: "left" }, 500);
     $('.app_menu').animate({
       left: "-265px"
     }, 500);
   });

   $(".choose_view").click(function() {
     $(".viewList").show("slide", {
       direction: "right"
     }, 500);
     $('.app_menu').animate({
       left: "-265px"
     }, 500);
   });
   $(".choose_tasks").click(function() {
     var text = $(this).find('span').text();
     $('.filter_name ').html(text);
     $(".tasks_menu").show("slide", {
       direction: "right"
     }, 500);
     //$(".app_menu").hide("slide", {...