JSFiddle - React, Tailwind, and code Playground

C Layout Full(er)

by Christopher O

HTML

<script src="https://fonts.googleapis.com/css?family=Questrial"></script>
<div class="hideme" id="menu">
link 1<br>
link 2<br>
link 3<br>
</div>
<!----  BEGIN Main  ---->
<div class="squarebubble topbubble" id="toppy">
<div class="hamburger hamburger--arrowturn"  id="hammy">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <span id="logo">Chatfer</span>
</div>
<div id="main">
  <div class="squarebubble mainIn" id="lefty">🍌 Bananas are amazing fruit!</div>
  <div class="squarebubble mainIn" id="righty">🍒 Cherries taste delicious!</div>
</div>
<!----  END Main  ---->

<!-- <div id="info">Resize this panel to see grids respond</div> -->

CSS

html, body {
     height: 100%;
     position: relative !important;
}
body {
     padding: 0px;
     margin: 0px;
     font-family: Helvetica;
     background-color: #20262e;
}

#main {
     display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(14px, 1fr));
     */
     grid-template-columns: minmax(200px, 10fr) 30fr;
    /* default. will resize automatically */
     grid-gap: 0px;
}
.squarebubble{
     background-color: #fff;
    /* border-radius: 3px;
     */
}
.mainIn {
    /* padding: 20px;
     */
     font-size: 14px;
}
/* Main Top div */
.topbubble{
    /* margin-bottom: 10px;
     */
     padding: 1px;
     font-size: 14px;
     height:40px;
     /* border-bottom:1px solid #ccc; */
     background-color: #E0E7EF;
}

#logo{
  font-weight:bold;
  font-size: 18px;
  font-family: 'Questrial', sans-serif !important;
}

/* Main Left Div */
#lefty{
}

#menu{
     background-color: #FF0;
     width:200px;
     float:left;
     position:relative;
     height:100% !important;
     min-height:100% !important;
}
.hideme{
     display:none;
}

/* Hamburger Animation */

/* 

https://github.com/jonsuh/hamburgers/tree/master/dist https://rawgit.com/jonsuh/hamburgers/master/dist/hamburgers.min.css

 */
 .hamburger {
     padding: 15px 15px;
     display: inline-block;
     cursor: pointer;
     transition-property: opacity, filter;
     transition-duration: 0.15s;
     transition-timing-function: linear;
     font: inherit;
     color: inherit;
     text-transform: none;
     background-color: transparent;
     border: 0;
     margin: 0;
     overflow: visible;
}
 .hamburger:hover {
     opacity: 0.7;
}
 .hamburger.is-active:hover {
     opacity: 0.7;
}
 .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
     background-color: #000;
}
 .hamburger-box {
     width: 20px;
     height: 12px;
     display: inline-block;
     position: relative;
}
 .hamburger-inner {
     display:...

JavaScript

(function () {
    var useElm;
    var startOffset;
    var main = document.getElementById("main");
    var lefty = document.getElementById("lefty");
    var righty = document.getElementById("righty");
    var toppy = document.getElementById("toppy");
    var hammy = document.getElementById("hammy");
    var menu = document.getElementById("menu");
    /* var info = document.getElementById("info"); */
    //var leftyPct = 1/3; // Percentage lefty should use
    var leftyMinPx = 200;
    var precision = 100; // total number of grid units
    
    elasticFont(lefty,20,12,20); // element, pct, minpx, maxpx
    elasticFont(righty,20,12,20);
    setMainHeight();

    lefty.style.position = 'relative';

    var grip = document.createElement('div');
    /* grip.innerHTML = "&nbsp;"; */
    grip.style.top = 0;
    grip.style.right = 0;
    grip.style.bottom = 0;
    grip.style.width = '1px';
    grip.style.position = 'absolute';
    grip.style.cursor = 'col-resize';
    grip.style.backgroundColor = '#ccc';
    /* grip.style.border = '1px solid #ccc'; // testing */
    grip.addEventListener('mousedown', function (e) {
        useElm = lefty;
        startOffset = lefty.offsetWidth - e.pageX;
    });

    lefty.appendChild(grip);


    document.addEventListener('mousemove', function (e) {
      if (useElm) {
        leftWidthPx = startOffset + e.pageX;        
        rightWidthPx = righty.offsetWidth;
        
        totalWdth = leftWidthPx + rightWidthPx;
        
        pxPerUnit = totalWdth/precision;
        leftUnits = Math.round(leftWidthPx/pxPerUnit);
        rightUnits = precision - leftUnits;
        
        // Require minimum width
        if(leftWidthPx < leftyMinPx){
          return;
        }
               
        main.style.gridTemplateColumns = leftUnits + 'fr '+ rightUnits +'fr'; // set grid width by units
        
        elasticFont(lefty,20,12,20); // element, pct, minpx, maxpx
        elasticFont(righty,20,12,20);
        setMainHeight();
       ...