JSFiddle - React, Tailwind, and code Playground

HTML

<main id="page" class="page">
  <aside class="page__sidebar">
    <div class="page__sidebar-content">
      <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>
    </div>
  </aside>
  <div class="page__container">
    <section class="page__content">
      <button...

CSS

* {
  box-sizing: border-box;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.page__sidebar {
  flex: 0 0 300px;
  background: black;
  transition: flex-basis 3s;
}

.page__sidebar-content {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 100px;
}

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

.page__content {
  padding: 20px;
  font-size: 32px;
  overflow-y: scroll;
}

.page__footer {
  height: 200px;
  background: #a9a9a9;
}

.page--min .page__sidebar {
  flex-basis: 80px;
}

.page__container {
  display: flex;
  flex-direction: column;
}

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