JSFiddle - React, Tailwind, and code Playground

HTML

<main id="page" class="page">
  <header class="page__header">Logo</header>
  <aside class="page__sidebar">
    <ul>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
      <li>Menu item 4</li>
      <li>Menu item 5</li>
      <li>Menu item 6</li>
      <li>Menu item 7</li>
      <li>Menu item 9</li>
      <li>Menu item 10</li>
      <li>Menu item 11</li>
      <li>Menu item 12</li>
      <li>Menu item 13</li>
      <li>Menu item 14</li>
      <li>Menu item 15</li>
      <li>Menu item 16</li>
      <li>Menu item 17</li>
      <li>Menu item 18</li>
      <li>Menu item 19</li>
      <li>Menu item 20</li>
      <li>Menu item 21</li>
      <li>Menu item 22</li>
      <li>Menu item 23</li>
      <li>Menu item 24</li>
      <li>Menu item 25</li>
      <li>Menu item 26</li>
      <li>Menu item 27</li>
      <li>Menu item 28</li>
      <li>Menu item 29</li>
      <li>Menu item 30</li>
      <li>Menu item 31</li>
      <li>Menu item 32</li>
      <li>Menu item 33</li>
      <li>Menu item 34</li>
      <li>Menu item 35</li>
      <li>Menu item 36</li>
      <li>Menu item 37</li>
      <li>Menu item 38</li>
      <li>Menu item 39</li>
      <li>Menu item 40</li>
      <li>Menu item 41</li>
      <li>Menu item 42</li>
      <li>Menu item 43</li>
      <li>Menu item 44</li>
      <li>Menu item 45</li>
      <li>Menu item 46</li>
      <li>Menu item 47</li>
      <li>Menu item 48</li>
      <li>Menu item 49</li>
      <li>Menu item 50</li>
      <li>Menu item 51</li>
      <li>Menu item 52</li>
      <li>Menu item 53</li>
      <li>Menu item 54</li>
      <li>Menu item 55</li>
      <li>Menu item 56</li>
      <li>Menu item 57</li>
      <li>Menu item 58</li>
      <li>Menu item 59</li>
      <li>Menu item 60</li>
    </ul>
  </aside>
  <section class="page__content">
    <button id="button" type="button">Toggle Sidebar</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

CSS

.page {
  min-height: 100vh;
  padding-left: 300px;
  padding-top: 80px;
  padding-bottom: 140px;
  transition: padding-left 3s;
}

.page__header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  background: #a9a9a9;
  z-index: 1000;
  padding: 20px;
}

.page__sidebar {
  box-sizing: border-box;
  padding: 20px;
  width: 300px;
  height: calc(100% - 220px);
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 80px;
  left: 0;
  bottom: 0;
  background: black;
  transition: width 3s;
}

.page__sidebar > ul > li {
  color: #ffffff;
  font-size: 32px;
}

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

.page__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  padding: 20px;
  background: #a9a9a9;
}

.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);