Grid/Flexbox Dash Pico CSS

https://medium.com/@kevjose/building-dashboards-using-grid-and-flex-box-620adc1fff51

by ethanpil

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<div id="layout-container">
  <div class="menu-icon">
    <strong> &#9776;</strong>
  </div>
  <div id="layout-header">

<nav>
  <ul>
    <li><a href="#" class="secondary">...</a></li>
  </ul>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="secondary">...</a></li>
  </ul>
</nav>

  </div>
  <aside id="sidebar">
    <div class="aside_close-icon">
      <strong>đť—«</strong>
    </div>


    <nav>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
      </ul>
    </nav>
    
  </aside>
  <main>
    <div class="main_overview">
      <article>I’m a card!</article>
      <article>I’m a card!</article>
      <article>I’m a card!</article>
      <article>I’m a card!</article>
    </div>

    <div class="main_cards">
      <div class="card">Card</div>
      <div class="card">Card</div>
      <div class="card">Card</div>
    </div>
  </main>
  <div id="layout-footer">
    <div class="footer_copyright">&copy;2020</div>
    <div class="footer_byline">Made with &hearts;</div>
  </div>
</div>

CSS

#layout-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 1fr 50px;

  grid-template-areas:
    'header'
    'main'
    'footer';
    
  height: 100vh;
}

#layout-header {
  grid-area: header;
  background-color: whitesmoke;
  padding: 15px;
}

#sidebar {
  grid-area: sidebar;
  background-color:  var(--pico-primary-background);
}

main {
  grid-area: main;
  background-color: white;
}

#layout-footer {
  grid-area: footer;
  background-color: whitesmoke;
  padding: 15px;
}

/* flexing header and footer*/
#layout-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* flexing aside */
#sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 240px;
  position: fixed;
  overflow-y: auto;
  z-index: 2;
  transform: translateX(-245px);
}

#sidebar.active {
  transform: translateX(0);
}

#sidebar nav {
  margin-top: 85px;
  padding: 0 20px;
}

#sidebar nav a{
  color: var(--pico-primary-inverse);
}

#sidebar nav a:hover{
  text-decoration: none;
  color: var(--pico-contrast-hover);
}
/* Layout for main content overview  and its cards*/
.main_overview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.main_overview article {
  flex-basis: 250px;
  flex-grow: 1;
  margin: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
/* Layout for main-cards section // below main_overview */
.main_cards {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 500px 200px 300px;
  grid-template-areas:
    'card1'
    'card2'
    'card3';
  grid-gap: 10px;
}
.card {
  padding: 20px;
  border: 1px solid tomato;
  border-radius: 4px;
  color: tomato;
}

.card:first-child {
  grid-area: card1;
}
.card:nth-child(2) {
  grid-area: card2;
}
.card:nth-child(3) {
  grid-area: card3;
}

/* responsive layout */
@media only screen and (min-width: 750px) {
  #layout-container {
    display: grid;
   ...

JavaScript

const menuIcon = document.querySelector('.menu-icon');
const aside = document.querySelector('#sidebar');
const asideClose = document.querySelector('.aside_close-icon');

function toggle(el, className) {
  if (el.classList.contains(className)) {
    el.classList.remove(className);
  } else {
    el.classList.add(className);
  }
}

menuIcon.addEventListener('click', function() {
  toggle(aside, 'active');
});

asideClose.addEventListener('click', function() {
  toggle(aside, 'active');
});