JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="grid">
  <header class="b">header: fixed height</header>
    
  <div class="toolbar y">
    <div class="search">search: click to show filter area</div>
    <div class="filter s">filter tools</div>
  </div>
  
  <div class="sidebar">
    <div class="toolbar r">toolbar: fixed height</div>
    <nav class="g">list: must expand to bottom</nav>
  </div>
  
  <main class="p">main: must expand to bottom and start right under the header.</main>
</div>

CSS

.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: minmax(50px auto) auto;
  grid-template-areas: "toolbar header"
                        "sidebar main"
}

.sidebar {
  align-self: stretch;
}
header { grid-area: header; }
.toolbar  { grid-area: toolbar; }

.b { background-color: blue; }
.y { background-color: yellow; }
.r { background-color: red; }
.g { background-color: green; }
.p { background-color: pink; }
.s { background-color: silver; }

.y:hover { background-color: gold; }
.filter { display: none; height: 400px; }
.search:hover { cursor: pointer; }
.search { height: 50px; z-index: 1; }
.sidebar { display: flex; flex-direction:column; }
.sidebar nav { flex: 1; }

JavaScript

const search = document.querySelector('.search');

search.addEventListener('click', function() {
  const filter = document.querySelector('.filter');
  const { display } = window.getComputedStyle(filter);

  if (display === "none") {
    filter.style.display = "block";
    search.innerHTML = "search: click to hide filter area"
  } else {
    filter.style.display = "none";
    search.innerHTML = "search: click to show filter area"
  }
});