New UI v2

by myrluk3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://cdn.rawgit.com/icons8/i8-icon-bower/v0.0.1/jquery-i8-icon.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link href='https://fonts.googleapis.com/css?family=Biryani:400,600' rel='stylesheet' type='text/css'>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="appWrapper">
  <div class="left-menu-container unselectable" style="float:left;">
    <i class="fa fa-bars"></i>
    <div class="left-menu">
      <div class="menu"><i data-i8-icon="home"></i><span>Home</span></div>
      <div class="menu public-bookmarks"><i data-i8-icon="bookmark"></i><span>Public Bookmarks</span></div>
      <div class="menu"><i data-i8-icon="bookmark"></i><span>Private Bookmarks</span></div>
      <div class="menu"><i data-i8-icon="support"></i><span>Control Panel</span></div>
      <div class="menu"><i data-i8-icon="puzzle"></i><span>Report Builder</span></div>
      <div class="menu"><i data-i8-icon="combo_chart"></i><span>Dashboard</span></div>
      <div class="menu"><i...

CSS

/* ====================== MAIN ====================== */

body {
  background-image: url('https://www.aerocenter.ro/LocationFileHandler/1200/1200/toronto-1746.jpg');
  background-size: cover;
}

#appWrapper {
  max-width: 1300px;
  margin: 50px auto;
  height: 600px;
}

#header {
  padding: 5px 0 0 10px;
  font-family: Biryani;
  font-weight: bold;
  color: white;
  font-size: 24px;
  float: right;
  margin-right: 9px;
}

.i8-icon {
  width: 16px;
  height: 16px;
}

.btn-default,
.btn-secondary,
.btn-primary {
  font-size: 12px;
  padding: 4px 10px;
  line-height: 1;
}

.btn-default,
.btn-secondary {
  color: #3361AF;
}

.btn-primary {
  background-color: #3361AF;
}

hr {
  margin: 5px 0;
  border-top: 1px solid #ddd;
}

#contentContainer {
  background-color: rgba(256, 256, 256, .8);
  height: 600px;
  float: right;
  width: calc(100% - 170px);
}

.bootstrap-select.btn-group .no-results {
  font-size: 12px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  color: #666;
}

.form-control {
  font-size: 12px;
  height: 21px;
}

.input-group .btn,
.btn-group .btn {
  float: none;
  line-height: 1.1;
  font-size: 12px;
  padding: 3px 5px;
}

.panel-heading {
  padding: 3px 10px;
}

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.panel-group .panel {
  overflow: hidden;
}

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}


/* ====================== MENU ====================== */

.left-menu-container {}

.left-menu-container > i {
  font-size: 1em;
  cursor: pointer;
  padding: 13px 14px;
  color: white;
  background-color: transparent;
}

.left-menu {
  height: 500px;
  width: 131px;
}

.left-menu i {
  font-size: 1em;
  cursor: pointer;
  margin: 12px;
}

.public-bookmarks svg * {
  fill:...

JavaScript

$(function() {
  $(document).i8icons(function(icons) {
    icons.defaultIconSetUrl('https://raw.githubusercontent.com/icons8/flat-color-icons/master/icon-set/icons.svg');
  });
})

// =============================== Menu ===============================

var open = true;
$('.fa-bars').click(function() {
  var callback = function(doIt) {
    doIt && $('.left-menu span').each(function(index, element) {
      $(element).toggle();
    });
  };

  var width = open ? '40px' : '170px';
  var ccwidth = open ? '+=130px' : '-=130px';
  console.log(ccwidth);

  $('.left-menu').animate({
    width: width
  }, {
    start: $.proxy(callback, this, open, true),
    complete: $.proxy(callback, this, !open),
  });
  $('#contentContainer').animate({
    width: ccwidth
  }, {});
  open = !open;
});

$('.fa-bars').trigger('click');

var setNavigation = function(firstNav, secondNav) {
  firstNav && $('.first-nav').html(firstNav);
  if (secondNav) {
    $('.navigation .separator').show();
    $('.navigation .second-nav').html(secondNav);
    $('.first-nav').removeClass('selected');
  } else {
    $('.navigation .separator').hide();
    $('.navigation .second-nav').html('');
    $('.first-nav').addClass('selected');
  }
}

// menu click
$('.left-menu .menu').click(function() {
  var $menu = $(this);
  $('#contentContainer > div').hide();

  $('.left-menu .menu').removeClass('clicked');
  $menu.addClass('clicked');
  setNavigation($menu.find('span')[0].innerText);

  if ($menu.hasClass('public-bookmarks')) {
    $('#bookmarksContainer').show();
  }
});

$('.public-bookmarks').trigger('click');

// =============================== Toolbar ===============================

$('#toolbar-toggle').click(function() {

  $('.toolbar .btn span').each(function(index, element) {
    $(element).toggle();
  });
  $(this).toggleClass('fa-toggle-on');
  $(this).toggleClass('fa-toggle-off');
});

$('.ol-remove-btn').click(function() {
  var parent = $($(this).parent()[0]);
  var picker =...