JSFiddle - React, Tailwind, and code Playground

HTML

<main id="page" class="page">
  <aside class="page__sidebar"></aside>
  <section class="page__content">
    <button id="button" type="button" @onclick="toggle()">Toggle Sidebar</button>
  </section>
</main>

CSS

.page {
  position: relative;
  height: 100vh;
  padding-left: 300px;
  transition: padding-left 3s;
}

.page__sidebar {
  height: 100%;
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: black;
  transition: width 3s;
}

.page__content {
  padding: 20px;
  height: calc(100% - 40px);
}

.page--min {
  padding-left: 80px;
}

.page--min .page__sidebar {
  width: 80px;
}

JavaScript

let isOpen = true;
const page = document.getElementById('page');
const button = document.getElementById('button');
button.addEventListener('click', () => {
  if (isOpen) page.classList.add('page--min');
  else page.classList.remove('page--min');
  isOpen = !isOpen;
}, false);