JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div id="right_panel"></div>

CSS

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel:after {
 content: " ";
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

JavaScript

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
		  console.log('move');
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  console.log('sssstart');
  if (e.offsetX < BORDER_SIZE) {
  console.log('start');
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
		  console.log('end');
    document.removeEventListener("mousemove", resize, false);
}, false);