JSFiddle - React, Tailwind, and code Playground

by nabtron

HTML

<div id="sidebar" class="sidebar">
  <a href='javascript:void(0)' class='backbtn hide' onclick='backNav()'>Back</a>
  <div class='main-menu'>
    <a href='javascript:void(0)' onclick='options()'>Click Me</a>
  </div>
  <div class='options hide'>
    <a href='javascript:void(0)'>Options ~</a>
    <div class='options-body'></div>
  </div>
</div>
<div id="main">
 <button onclick='add()'>Add</button>
</div>

CSS

html {
  color: #999;
}

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

.sidebar a {
  padding: 22px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
  margin-left: 250px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }

  .sidebar a {
    font-size: 18px;
  }
}

.backbtn {
  position: absolute;
  top: 0;
  font-size: 20px !important;
  padding: 8px 8px 8px 8px !important;
}

.hide {
  display: none !important;
}


.sidebar .options {
  display: flex;
  flex-flow: column;
  height: 100%;
  
  /* display: table;*/
}

.sidebar .options .options-body {
  background-color: rgb(52, 56, 87);
  flex-grow: 1;
  /*display: table-row;  */
}

.item-list {
  background-color: rgb(52, 102, 95);
}

JavaScript

function options() {
  $('.backbtn').toggleClass('hide');
  $('.main-menu').toggleClass('hide');
  $('.options').toggleClass('hide');
}

function backNav() {
  $('.backbtn').toggleClass('hide');
  $('.main-menu').toggleClass('hide');
  $('.options').addClass('hide');
}

function add() {
  var items = ['a', 'b', 'c', 'd', 'e'];
  var itemsHtml = [];
  $.each(items, function(key, val) {
    var liElement = document.createElement('li');
    liElement.id = key;
    liElement.innerHTML = '<span class="item">' + val + '</span>';
    itemsHtml.push(liElement.outerHTML);
  });
  
  var htmlBuilder = itemsHtml.join("");
  var listui = $("<ul/>", {
    "class": "item-list",
    html: htmlBuilder
  }).appendTo(".options-body");
}