JSFiddle - React, Tailwind, and code Playground

by mkirkland616

HTML

<div id="container" class="layout-container" layout="4">
    <div class="layout-item" position='1'>
        <div class="item-wrapper">1</div>
    </div>
    <div class="layout-item" position='2'>
        <div class="item-wrapper">2</div>
    </div>
    <div class="layout-item" position='3'>
        <div class="item-wrapper">3</div>
    </div>
    <div class="layout-item" position='4'>
        <div class="item-wrapper">4</div>
    </div>
    <div id="detailsPanel" class="details-panel">
        <div id="leftBar" class="left-bar"></div>
    </div>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.layout-container {
    display: flex;
    overflow: hidden;
    height: 95vh;
    width: 100%;
    background-color: red;
}

.layout-item {
    border: 1px solid #2d2d30;
    background-color: #252525;
    flex: auto;
    position: relative;
    display: none;
}

.layout-item .item-wrapper {
    background-color: yellow;
    height: 100%;
    width: 100%;
    border: 8px solid green;
}

.details-panel {
    width: 30px;
    background-color: #252525;
    border: 1px solid #444445;
    border-left-width: 0;
}

.details-panel.open {
    width: 200px;
}

.left-bar {
    background-color: #444445;
    width: 30px;
    height: 100%;
}

JavaScript

let container = document.getElementById('container');
let leftBar = document.getElementById('leftBar');
let detailsPanel = document.getElementById('detailsPanel');

let cList = container.querySelectorAll('.layout-item');
cList.forEach(item => {
	/* console.log(item); */
    item.style.display = 'unset';
});

leftBar.addEventListener('click', () => {
    detailsPanel.classList.toggle('open');
});