hideable side menu layout with opener draft

by ShaCP

HTML

<section class="container">
  <div class="left side menu">
    <div class="side_contents">
    </div>
    <div class="tab">
      >
    </div>
  </div>
  <div class="center">
  </div>
  <div class="right side padding">
    <div class="side_contents">
    </div>
  </div>
</section>

CSS

body {
  margin: 0;
  min-width: 100%;
}

body,
.container {
  min-height: 100vh;
}

.container {
  margin: auto;
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 800px;
  border: 1px solid black;
  /* grid-template-columns: 1fr 700px 1fr; */
}

.center {
  min-width: 500px;
  max-width: 500px;
  width: 62.5%;
  background: lightskyblue;
}

.side {
  /*   flex-grow: 1; */
  display: flex;
  width: 18.75%;
  max-width: 150px;
  position: relative;
  background-color: lightpink;
  transition: 0.5s width linear
}

.side_contents {
  overflow-x: hidden;
}

.left {
  z-index: 9999;
}

.right {
  background-color: unset;
}

.tab {
  position: absolute;
  left: 100%;
  overflow-x: hidden;
  font-size: 2em;
}

@media screen and (max-width: 500px) {
  .center {
    min-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .side {
    width: 0;
  }
}

.unhide {
  width: 75%;
}

.text {
  position: absolute;
}

.element_width {
  position: absolute;
  left: 0;
  z-index: 99999;
}

.right .element_width {
  left: unset;
  right: 100%;
}

div {
  position: relative;
}

/* div:first-child, div:last-child {
  padding: 1000px
} */

/* div:nth-child(1) {
  padding: 1000px
} */

/* 3 divs set to 100% of their container will each take 33.333% */

JavaScript

Function.prototype.throttle = function(limit) {
  var callback = this;
  var timeout;
  var waiting = false; // Initially, we're not waiting
  return function() { // We return a throttled function
    clearTimeout(timeout);
    if (!waiting) { // If we're not waiting
      callback.apply(this, arguments); // Execute users function
      waiting = true; // Prevent future invocations
      setTimeout(function() { // After a period of time
        waiting = false; // And allow future invocations
      }, limit);
    }
    var runAtTheEnd = callback.bind(this, arguments[0]);
    timeout = setTimeout(runAtTheEnd, limit);
  }
}

function appendElement(element, elementToAdd) {
  var lastElement = element.children[element.children.length - 1];
  if (element.children[0] && lastElement.className === "element_width") {
    element.replaceChild(elementToAdd, element.children[element.children.length - 1])
  } else {
    element.appendChild(elementToAdd);
  }
}


var sideMenus = [...document.querySelectorAll(".side")];
var tabs = [...document.querySelectorAll(".tab")];
var container = document.querySelector(".container");
var center = document.querySelector(".center");


function indexedWidthReports (i) {
return function reportWidth(entries) {
  for (var entry of entries) {
    var {
      target,
      contentRect
    } = entry;

    var widthElement = document.createElement("span");
    widthElement.className = "element_width"
    widthElement.style.top = `${!i ? i + 2 : i === 1 ? i + 3 : (i + 1) * 2}em`
    widthElement.innerHTML = (target.className || target.localName) + " " + parseInt(contentRect.width) + "px";
    appendElement(target, widthElement);
  }
}
}

/* const throttledReportWidth = reportWidth.throttle(150); */

var elementsToObserve = [...sideMenus, container, center, document.body];

addObserver(elementsToObserve);

function addObserver(elementArray) {
  elementArray.forEach((element, i) => {
    const resizeObserver = new...