JSFiddle - React, Tailwind, and code Playground

by mkirkland616

HTML

<layout>
  <header></header>
  <left-pane>asd</left-pane>
  <content>
    <button>Move</button>
  </content>
</layout>

CSS

html, body {
  height: 100%;
  margin: 0;
}
layout {
  display: block;
  position: relative;
  /* background-color: green; */
  height: 100%;
}
header {
  display: block;
  background-color: blue;
  height: 45px;
  position: relative;
}
left-pane {
  height: 100%;
  width: 240px;
  background-color: red;
  display: inline-block;
  position: relative;
}
content {
  width: 100%;
  height: 100%;
  background-color: yellow;
  display: inline-block;
  position: absolute;
}
button {
  margin: 50px;
}
.closed {
  width: 0px;
}

JavaScript

let btn = document.getElementsByTagName('button')[0];
let left = document.getElementsByTagName('left-pane')[0];

btn.addEventListener('click', function() {
	if(left.className !== 'closed') {
  	left.className = 'closed';
  } else {
  	left.classList.remove('closed');
  }
	
});