JSFiddle - React, Tailwind, and code Playground

HTML

<main id="page" class="page">
  <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" @onclick="toggle()">Toggle Sidebar</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad...

CSS

* {
  box-sizing: border-box;
}

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

.page__sidebar {
  padding: 20px;
  flex: 0 0 300px;
  background: black;
  transition: flex-basis 3s;
  overflow-x: hidden;
  overflow-y: scroll;
}

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

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

.page--min .page__sidebar {
  flex-basis: 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);