JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>





<nav class="navbar navbar-inverse ui-dashboard-toolbar">
	<div class="container-fluid">
		<div class="navbar-header">
			<div class="navbar-brand">Dashboard Tools</div>
		</div>
		<div class="collapse navbar-collapse" id="dashboard-admin-toolbar">
      <ul class="nav navbar-nav navbar-right">
      </ul>
      <ul class="nav navbar-nav navbar-right">
     
        
        
        
        
        
        <li class="dropup">
          <button href="#" class="dropdown-toggle btn btn-primary btn-sm navbar-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-share-alt"></i><span class="hidden-sm hidden-xs">Share</span>
          </button>
          <div class="dropdown-menu" style="padding:10px; min-width:300px; border-radius:4px;">
            
            <div id="SnapshotDashboard_controlx" class="show">
              <div class="input-group input-group-sm">
                <input type="text" id="copythis" class="form-control"...

CSS

@import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);
body,
body *,
input {
  font-family: "Open Sans";
}

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: inset 2px 2px 15px #000;
  background-color: rgb(76, 80, 83);
  color: #aaa;
}

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

.sidr a,
.sidr a:link,
.sidr a:visited {
  color: #fff;
}

.sidr a:hover {
  color: #fff;
}

#docPanel.sidr {
  width: 650px;
}

#docPanel.sidr.right {
  left: auto;
  right: -650px;
}

.fuzzy-time {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  margin-left: 5px;
}

.fuzzy-time .fa {
  padding-right: 3px;
}

/* theme  */

.breadcrumb {
  font-size: 18px;
  background-color: #fff
}

.center.block {
  text-align: center;
  padding: 10px 50px
}

.nav-pills>li>a {
  color: #777;
  background-color: #fff;
  border-radius: 0;
  padding-top: 5px;
  border-left: 5px solid #fff;
}

.nav-pills>li.active>a {
  color: #337ab7;
  border-left: 5px solid #337ab7;
  background-color: #fff;
  border-radius: 0;
  font-weight: bold;
}

.nav-pills>li.active>a:hover {
  color: #337ab7;
  border-left: 5px solid #337ab7;
  background-color: #fff;
  border-radius: 0;
}

.nav-pills>li>a:hover {
  color: #fff;
  background-color: #337ab7;
  border-left: 5px solid #337ab7;
  border-radius: 0;
}

.navbar {
  padding: 10px 0
}

body {
  font-size: 12px;
}

i.fa {
  padding-right: 8px;
}

.table-bordered>tbody>tr>td,
.table-bordered {
  border-right-width: 0;
  border-left-width: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #777
}

.table-bordered>tbody>tr:first-child>td {
  border-top-color: #fff;
}

.table-bordered>thead>tr>th,
.table-bordered>thead {
 ...

JavaScript

$('#ybx-proto-copy-link').click(function() {
  $(this).closest('li').find('.ui-proto-link-copy').toggle();
  $(this).closest('li').find('input').select();
  $(this).closest('li').find('input').focus();
});

$('#ybx-proto-team-switcher').click(function() {
  alert('ChangeTeam, kw select with User favorites in alph descending order by default, then typeahead for any team');

});

$('.ui-folder-tool .fa-trash').click(function() {
  alert('remove folder menu, warn about deleting documents or moving');

});

$('.ui-folder-tool .fa-arrows').click(function() {
  alert('compact navigatble tree to select destination');

});

$('.ui-folder-tool .fa-heart').click(function() {
  alert('add to favorites');

});



$("#ybx-proto-parent-level").click(function() {

  var $this = $(this),
    $parent_level = $('#parent_level').clone(true);

  $(".ydr-grid-team").html($parent_level);
  resetCrumbtrail('parent');

});


$('.ybx-proto-crumbtrail').on('click', "li>a", function() {

  var $this = $(this);
  resetCrumbtrail($this);
  loadGrid($this);

});

$('.ybx-proto-crumbtrail').on('click', "li:last-child>a", function(){
		var $this = $(this);


 if ( !$this.is('li:first-child > a')) {

alert('click to edit name');


 }
 


});

$("table").on('click', "a.ydr-first-level", function() {

  var $this = $(this),
    level = "first-level",
    $first_level_label = $(this).attr('data-label');

  loadFirstlevelGrid(level)
  addToCrumbtrail($first_level_label, level);
});

$("table").on('click', "a.ydr-second-level", function() {

  var $this = $(this),
    level = "second-level",
    $second_level_label = $(this).attr('data-label');

  loadSecondLevelGrid(level)
  addToCrumbtrail($second_level_label, level);

});


$("table").on('click', "a.ydr-empty-level", function() {

  var $this = $(this),
    level = "empty-level",
    $second_level_label = $(this).attr('data-label');

  loadEmptyGrid(level)
  addToCrumbtrail($second_level_label, level);

});


$('.ydr-panel-user').click(function()...