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="toggle">----</div>
  <div class="navigation">
    <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...

SCSS

body {
  overflow: hidden;
}
.layout {
  display: grid;
  height: 100vh;
  width: 100vw;
  background-color: #aaa;
  grid-template-rows: 1fr;
  grid-template-columns: [navigation] 70px [sidebar] 200px [content] 3fr;
  font-family: 'Lato';
  
  > * {
    max-height: 100vh;
    overflow: auto;
  }
}

.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;
  cursor: pointer;
  &:before, &:after {
    display: block;
    content: '----';
  }
}

.navigation {
  background-color: #111;
  color: #fff;
  grid-column: navigation;

  > .item {
    padding: 10px 0;
    border-bottom: 1px solid white;
    text-align: center;
    cursor: pointer;
    
    &:hover {
      background-color: #fff;
      color: #111;
    }
  }
}

.sidebar {
  background-color: orange;
  grid-column: sidebar;
    
  > .item {
    padding: 10px;
    border-bottom: 1px solid white;
    cursor: pointer;
    
    &:hover {
      background-color: #fff;
      color: #111;
    }
  }
}

.content {
  grid-column: content;
  background-color: indigo;
  color: #fff;
  padding: 1rem;
  font-size: 1.2rem;
  text-align: justify;
}

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

@media (max-width: 480px) {
  .layout {
    grid-template-columns:
      [navigation] 70px
      [sidebar] calc(80vw - 70px)
      [content] 100vw;
    margin-left: -80vw;
  }
}

JavaScript

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

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