JSFiddle - React, Tailwind, and code Playground

Menu Settings - Menu Manager

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css">
<div class="widget-holder">

  <header>
    <p>Main Menu</p>
    <a href="#">Need help?</a>
  </header>

  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#menu-settings" aria-controls="menu-settings" role="tab" data-toggle="tab">Main Menu Settings</a></li>
    <li role="presentation" class="active"><a href="#menu-manager" aria-controls="menu-manager" role="tab" data-toggle="tab">Menu Manager</a></li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="menu-settings">
      <div class="controls">
        <p>This feature will be available soon when we add new menu styles.</p>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane active" id="menu-manager">

      <div id="initial-holder">
        <div class="controls">
          <p>You have not created any menus yet. Create a new menu to get started.</p>
          <button class="btn btn-primary start-item">Create Menu</button>
        </div>
      </div>

      <div class="hidden" id="panel-holder">
        <form class="form-horizontal">

          <div class="form-group">
            <div class="col-sm-4 control-label">
              <label for="select-menu">Select a menu</label>
            </div>
            <div class="col-sm-8">
              <label for="select-menu" class="select-proxy-display">
                <span class="icon fa fa-chevron-down"></span>
                <span class="select-value-proxy">Select a menu</span>
                <select name="select_menu"...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #f2f6f7;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-danger {
  color: #FFF;
  background-color: #d9534f;
  border-bottom: 2px solid #c9302c;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover,
.btn-danger:active:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}

.btn-link,
a {
  color: #00abd1;
}

.widget-holder {
  padding: 15px;
}

header {
  display: flex;
  font-size: 0.8em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 3rem;
  padding-bottom: 1.5em;
}

header.titles {
  font-weight: bold;
}

header p {
  flex: 1;
  margin: 0 1.4rem 0 0;
}

header a {
  text-decoration: none;
}


/* TABS */

.nav-tabs > li.disable {
  pointer-events: none;
}

.nav-tabs > li.disable > a {
  color: #999 !important;
}

.nav > li > a,
.nav > li > a:focus,
.nav > li > a:hover {
  color: #333 !important;
  border: 0px;
  border-bottom: 4px solid transparent;
  background: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #333;
  border: 0px;
  border-bottom: 4px solid #00abd2;
  background:...

JavaScript

$('.start-item').on('click', function() {
  $('#initial-holder').addClass('hidden');
  $('#panel-holder').removeClass('hidden');
});

$('#select-menu').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});

$('.panel-group').sortable({
  handle: ".panel-heading",
  cancel: ".icon-delete",
  tolerance: 'pointer',
  revert: 150,
  placeholder: 'panel panel-default placeholder tile',
  cursor: '-webkit-grabbing; -moz-grabbing;',
  axis: 'y',
  start: function(event, ui) {
    $('.panel-collapse.in').collapse('hide');
    ui.item.addClass('focus').css('height', ui.helper.find('.panel-heading').outerHeight() + 2);
    $('.panel').not(ui.item).addClass('faded');
  },
  stop: function(event, ui) {
    ui.item.removeClass('focus');
    $('.panel').not(ui.item).removeClass('faded');
  },
  sort: function(event, ui) {
    $('.panel-group').sortable('refresh');
    $('.tab-content').trigger('scroll');
  }
});

$(".tab-content").on('show.bs.collapse', '.panel-collapse', function() {
    $(this).siblings('.panel-heading').find('.fa-chevron-right').removeClass('fa-chevron-right').addClass('fa-chevron-down');
  })
  .on('hide.bs.collapse', '.panel-collapse', function() {
    $(this).siblings('.panel-heading').find('.fa-chevron-down').removeClass('fa-chevron-down').addClass('fa-chevron-right');
  })
  .on('shown.bs.collapse hidden.bs.collapse', '.panel-collapse', function() {
    $('.tab-content').trigger('scroll');
  });

$('select[name="link_type"]').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $('.section.show').removeClass('show');
  $('#' + selectedValue).addClass('show');
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});

$('select[name="transition"]').on('change', function() {
  var...