CMS LEFT PANEL

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" style="top:0;">

  <!--div class="pb-sidebar-header">
    Header tools
  </div-->

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

    <div id="pb-sidebar-menu" style="width: 300px;">
      <div class="" data-uk-grid>
        <div class="uk-width-1-1">
          <ul class="uk-nav-default uk-nav-center" data-uk-nav>
            <li class="uk-active"><a class="open-page-panel">Pages</a></li>
            <li><a class="open-another-panel">Another panel</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </div>

        <div class="uk-width-1-1 uk-text-center">
          <div class="uk-margin uk-position-relative">
            <span class="uk-badge uk-position-absolute pb-account-notices" style="left: 128px; top: -6px;">2</span>

            <img class="uk-border-circle" src="https://raw.githubusercontent.com/iPaoo/react-admin/master/images/default-avatar.png?token=ASr8y_Ss8-67OFTC_dukSPIjOQ0Hv07Pks5Zlrh-wA%3D%3D" style="width: 50px; height: 50px;">
          </div>
          <div class="uk-text-small uk-text-muted">
            <a>GREG B.</a>
            <br>
            <a>LOGOUT</a>
          </div>
        </div>
      </div>

    </div>

    <div id="pb-pages-panel" style="width: 600px;">
      <p style="height: 1500px">
        <a class="back">back</a>
        <br> I am page panel
        <a class="open-subpage-panel">Sub page panel</a>
      </p>
    </div>

    <div id="pb-another-panel" style="width: 450px;">
      <p style="height: 1500px">
        <a class="back">back</a>
        <br> I am another panel
      </p>
    </div>

    <div id="pb-subpages-panel" style="width: 450px;">
      <p style="height: 1500px">
       ...

CSS

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

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

.pb-rendered-view {
  box-sizing: border-box;
  position: absolute;
  overflow: auto;
  //height: calc(100% - 45px);
  top: 0;
  right: 0;
  bottom: 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;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow: hidden;
  padding: 15px;
}


/*
.pb-sidebar-header {
  box-sizing: border-box;
  position: absolute;
  min-width: 300px;
  max-width: 600px;
  height: 45px;
  top: 0;
  right: 0;
  left: 0;
  line-height: 45px;
  background: #ccc;
  margin: 0;
  padding: 0 15px;
}*/

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


/*.pb-sidebar-footer {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 45px;
  background: #444;
  margin: 0;
  padding: 0 15px;
  -webkit-transition: height 0.2s ease-in-out;
  transition: height 0.2s ease-in-out;
}*/

#pb-sidebar-menu {
  box-sizing: border-box;
  height: 100%;
  padding: 160px 35px 15px 35px;
  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-pages-panel {
  box-sizing: border-box;
  height: 100%;
  padding: 15px 35px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s...

JavaScript

$('.open-page-panel').click(function() {
  $('.pb-sidebar').css('width', '600px');
  $('#pb-sidebar-menu').css('left', '-300px');
  $('#pb-pages-panel').css('left', '0');
  $('.pb-rendered-view').css('width', 'calc(100% - 600px)');
});

$('.open-another-panel').click(function() {
  $('.pb-sidebar').css('width', '450px');
  $('#pb-sidebar-menu').css('left', '-300px');
  $('#pb-another-panel').css('left', '0');
  $('.pb-rendered-view').css('width', 'calc(100% - 450px)');
});

$('.open-subpage-panel').click(function() {
  $('.pb-sidebar').css('width', '450px');
  $('#pb-pages-panel').css('left', '-600px').addClass('parent');
  $('#pb-subpages-panel').css('left', '0');
  $('.pb-rendered-view').css('width', 'calc(100% - 450px)');
});

$('.back').click(function() {
  $('.pb-sidebar').css('width', '');
  $('#pb-sidebar-menu').css('left', '');
  $('#pb-pages-panel').css('left', '');
  $('#pb-another-panel').css('left', '');
  $('#pb-subpages-panel').css('left', '');
  $('.pb-rendered-view').css('width', 'calc(100% - 300px)');
});

$('.pb-rendered-view').on('click', '.pb-enter-preview', function() {
  $('.pb-sidebar').css('left', '-100%');
  //$('.pb-sidebar-footer').css('height', '0');
  $('.pb-rendered-view').css({
    'width': '100%',
    'height': '100%',
    'right': '',
    'top': ''
  });
  $(this).attr("class", "pb-exit-preview");
});

$('.pb-rendered-view').on('click', '.pb-exit-preview', function() {
  var sidebarwidth = $('.pb-sidebar').css('width');
  $('.pb-sidebar').css('left', '');
  //$('.pb-sidebar-footer').css('height', '');
  $('.pb-rendered-view').css({
    'width': 'calc(100% - ' + sidebarwidth + ')',
    'height': '',
    'right': '',
    'top': ''
  });
  $(this).attr("class", "pb-enter-preview")
})

$('.pb-preview-smartphone').click(function() {
	var sidebarwidth = $('.pb-sidebar').css('width');
	$('.pb-rendered-view').css({
    'width': '320px',
    'height': '568px',
    'right': 'calc((100% - ' + sidebarwidth + ' - 320px) / 2)',
    'top':...