JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="layout">
  <div class="nav">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
    <div class="item">21</div>
    <div class="item">22</div>
    <div class="item">23</div>
    <div class="item">24</div>
    <div class="item">25</div>
    <div class="item">26</div>
    <div class="item">27</div>
    <div class="item">28</div>
    <div class="item">29</div>
    <div class="item">30</div>
    <div class="item">31</div>
    <div class="item">32</div>
    <div class="item">33</div>
    <div class="item">34</div>
    <div class="item">35</div>
    <div class="item">36</div>
    <div class="item">37</div>
    <div class="item">38</div>
    <div class="item">39</div>
    <div class="item">40</div>
    <div class="item">41</div>
    <div class="item">42</div>
    <div class="item">43</div>
    <div class="item">44</div>
    <div class="item">45</div>
    <div class="item">46</div>
    <div class="item">47</div>
    <div class="item">48</div>
    <div class="item">49</div>
    <div class="item">50</div>
    <div class="item">51</div>
    <div class="item">52</div>
    <div class="item">53</div>
    <div class="item">54</div>
    <div class="item">55</div>
    <div class="item">56</div>
    <div class="item">57</div>
    <div class="item">58</div>
    <div class="item">59</div>
    <div class="item">60</div>
 ...

SCSS

body {
  font-family: Lato;
  overflow: hidden;
}

.layout {
  width: 100vw;
  display: flex;
  > * {
    height: 100vh;
    overflow: auto;
    flex-shrink: 0;
  }
  position: relative;
}

.nav {
  width: 70px;
  background-color: #111;
  
  >.item {
    border-bottom: 1px solid #fff;
    color: #fff;
    padding: 10px 0;
    text-align: center;
  }
}

.sidebar {
  width: 200px;
  background-color: orange;
  
  >.item {
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    text-align: center;
  }
}

.content {
  background-color: indigo;
  /* width: 100vw; */
  flex: 1;
  padding: .5rem;
  color: #fff;
  font-size: 1.2rem;
  text-align: justify;
}

.toggle {
  display: none;
  line-height: 0.5;
  position: absolute;
  grid-column: content;
  padding: .5rem;
  background-color: rgba(255, 255, 255, 0.6);
  top: 0; left: 0;
  z-index: 33;
  
  cursor: pointer;
  &:before, &:after {
    display: block;
    content: '----';
  }
}

@media (max-width: 768px) {
  .content {
    width: 100vw;
    position: relative;
  }
  .layout {
    position: relative;
    margin-left: calc(-70px - 200px);
    width: auto;
    transition: .3s margin ease;
    overflow: hidden;
    &.opened {
      margin-left: 0;
    }
  }
  .toggle {
    display: block;
  }
}

JavaScript

const $ = document.querySelector.bind(document);

$('.toggle').onclick = () => {
	$('.layout').classList.toggle('opened');
};