JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div id="sidebar">
  <div class="collection"><a href="#!" class="collection-item" data-objects="assets-walls">Стены</a><a href="#!" class="collection-item" data-objects="assets-floors">Полы</a><a href="#!" class="collection-item" data-objects="assets-floors">Потолки</a><a href="#!" class="collection-item" data-objects="assets-floors">Мебель</a><a href="#!" class="collection-item" data-objects="assets-floors">Спавны</a><a href="#!" class="collection-item" data-objects="assets-floors">Скрипты</a><a href="#!" class="collection-item" data-objects="assets-floors">Меняются и время</a><a href="#!" class="collection-item" data-objects="assets-floors">И мечты</a><a href="#!" class="collection-item" data-objects="assets-floors">Меняются, как время, представленья</a><a href="#!" class="collection-item" data-objects="assets-floors">Изменчивы под солнцем все явленья</a><a href="#!" class="collection-item" data-objects="assets-floors">И мир всечастно видишь новым ты</a></div>
</div>
<div id="content">
  <button id="btn"></button>
  <div class="collection"><a href="#!" class="collection-item" data-objects="assets-walls">Стены</a><a href="#!" class="collection-item" data-objects="assets-floors">Полы</a><a href="#!" class="collection-item" data-objects="assets-floors">Потолки</a><a href="#!" class="collection-item" data-objects="assets-floors">Мебель</a><a href="#!" class="collection-item" data-objects="assets-floors">Спавны</a><a href="#!" class="collection-item" data-objects="assets-floors">Скрипты</a><a href="#!" class="collection-item" data-objects="assets-floors">Меняются и время</a><a href="#!" class="collection-item" data-objects="assets-floors">И мечты</a><a href="#!" class="collection-item" data-objects="assets-floors">Меняются, как время, представленья</a><a href="#!" class="collection-item" data-objects="assets-floors">Изменчивы под солнцем все явленья</a><a href="#!" class="collection-item" data-objects="assets-floors">И мир всечастно видишь новым ты</a></div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#sidebar, #content {
  height: 100%;
  overflow:auto;
  float:left;
  transition: width .35s;
}

#sidebar {
  background:white;
  width: 30%;
  box-shadow: 2px 0 4px rgba(0,0,0,0.5);
}

#sidebar.collapsed {
  width: 0;
}

#sidebar.collapsed + #content {
  width: 100%;
}

#content {
  background:gray;
  width: 70%;
}

button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:none;
  outline:none;
  background: black;
  margin: 20px;
  cursor:pointer;
}

h3 {
  font-family: sans-serif;
  color:white;
  text-align:center;
}

.collection {
    margin: .5rem 0 1rem 0;
    border: 0px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.collection a.collection-item {
    display: block;
    transition: .25s;
    color: #26a69a;
}
.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

JavaScript

var btn = document.getElementById('btn'),
	sdbr = document.getElementById('sidebar');
btn.addEventListener('click', function () {
	sdbr.classList.toggle('collapsed');
});