CMS LEFT PANEL > Pages

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.js"></script>
<div class="pb-sidebar">

  <div class="pb-sidebar-content">

    <div class="pb-sidebar-pages">

      <a href="#" class="uk-button uk-button-small uk-flex uk-flex-middle pb-sidebar-back-button">
        <span class="" data-uk-icon="icon: chevron-left"></span>Home
      </a>

      <!--MAIN NAV  -->
      <div class="uk-margin-large-top" uk-grid>
        <div class="uk-width-expand">
          <h3 class="uk-margin-remove-bottom">Main navigation</h3>
        </div>
        <div class="uk-width-auto uk-flex uk-flex-middle">
          <a class="uk-margin-small-right pb-add-to-main-nav" data-uk-icon="icon: plus"></a>
        </div>
      </div>
      <hr class="uk-margin-small-top">

      <!--START PAGE LIST  -->
      <ul class="pb-page-list" data-uk-sortable="group: my-group">

        <!--START ITEM  -->
        <li class="uk-visible-toggle pb-page-list-item pb-page-list-item-homepage">
          <div class="uk-grid-small" uk-grid>
            <div class="uk-flex uk-flex-middle">
              <span class="pb-is-homepage-item" data-uk-icon="icon: home"></span>
              <span class="uk-invisible-hover pb-open-delete-page-confirm" data-uk-icon="icon: trash"></span>
            </div>
            <div class="uk-width-expand uk-flex uk-flex-middle pb-is pb-is-page">
              <span class="pb-page-list-item-name">Home</span>
            </div>
            <div class="uk-flex uk-flex-middle">
              <span class="pb-is-private-item" data-uk-icon="icon: lock"></span>
            </div>
            <div class="uk-flex uk-flex-middle">
              <a class="uk-invisible-hover" data-uk-icon="icon: pencil"></a>
            </div>
            <div...

CSS

html {
  background: #444;
  overflow: hidden;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 {
  text-transform: uppercase;
  font-size: 1rem;
}

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}



/*MORE CSS BELOW FOR PAGE MANAGER*/



.pb-sidebar {
  background: #eee;
  box-sizing: border-box;
  display: block;
  position: fixed;
  min-width: 350px;
  max-width: 600px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.pb-sidebar-content {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 45px;
  margin-bottom: 45px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow: hidden;
}

.pb-sidebar-content h3,
.pb-sidebar-content >:not(.pb-sidebar-home) li a {
  padding-left: 20px
}

.pb-sidebar-home {
  box-sizing: border-box;
  width: 350px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.pb-sidebar-pages {
  box-sizing: border-box;
  width: 350px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding-top: 45px
}

.pb-reseller-logo {
  height: 50px;
  margin: 140px 0 80px 0;
}

.pb-account-avatar {
  width: 50px;
  height: 50px;
}

.pb-sidebar-device-tools {
  box-sizing: border-box;
  position: absolute;
  min-width: 350px;
  max-width: 600px;
  height: 60px;
  right: 0;
  //bottom: 45px;
  bottom: 0;
  left: 0;
  background: #eee;
  margin: 0;
  padding: 15px;
}

.pb-sidebar-back-button .uk-icon {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.pb-sidebar-back-button:hover .uk-icon {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}


/*MORE CSS...

JavaScript

/*$(".pb-page-list-show-sub-items").click(function() {
  $(this).parents().next('.pb-page-list').slideToggle();
  $(this).toggleClass('pb-chevron-down');
});*/

alert('Should be refactored as ul>li !??')



const togglers = document.querySelectorAll('.pb-page-list-show-sub-items');
togglers.forEach(function(el) {
  el.addEventListener('click', function() {
    el.classList.toggle('pb-chevron-down');
    let current = el,
      list = [];
    while (current.parentNode != null && !current.parentNode.classList.contains('pb-page-list-folder')) {
      list.push(current.parentNode);
      current = current.parentNode;
    }
    let parent = list[list.length - 1], // Get latest node in list;
    nextSibling = parent.nextElementSibling;
    slideToggle(nextSibling);
  })
});

function slideToggle(el) {
  let ch = el.clientHeight,
    sh = el.scrollHeight,
    isCollapsed = !ch,
    noHeightSet = !el.style.height;
    el.style.height = (isCollapsed || noHeightSet ? sh : 0) + "px";
}


document.querySelector('.pb-add-page').addEventListener('click', function() {
  alert('Switch current left panel "Pages" for "Create new page" panel with a single input to enter Page name (which will be used as main nav item) and a "Start to edit page" button which will open builder for this new page. Later we will add some layouts (presets for builder).')
});


$(".pb-add-sinle-page").click(function() {
  alert('Switch current left panel "Pages" for "Create new page" panel with a single input to enter Page name (which will be used as main nav item) and a "Start to edit page" button which will open builder for this new page. Later we will add some layouts (presets for builder).')
});

$(".pb-add-folder").click(function() {
  alert('Switch current left panel "Pages" for "Create new folder" panel with a single input to enter Folder name (which will be used as main nav item).')
});

$(".pb-add-link").click(function() {
  alert('Open Link picker...