navbar-to-sidenav-toggle.css

:root {
  --nav-color: #ff71b8;
}
.hidden { visibility:hidden; display:none; }
/* =============== */
/* Mobile First 📱*/
/* ============== */
body {
    display: grid;
    height: 100vh;
    grid-template-areas:
      "sidenav header"
      "sidenav main"
      "sidenav footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
}
header { grid-area: header; display: flex; }
main { grid-area: main }
footer { grid-area: footer }
aside.left-margin { visibility:hidden; display:none; }
aside.right-margin { visibility: hidden; display: none; }
nav { visibility:hidden; display: none; }
.sidenav { grid-area: sidenav; background-color: var(--nav-color); width: 250px; }

/* Mobile side navigation */
.header-title { margin: auto; }
.menu-button {
  background-color: var(--nav-color);
  padding: 0 0.8rem;
}
.moved {
  position: absolute;
  left: 0;
}

main {
  overflow-x: scroll;
}

/* =============== */
/*    Desktop 🖥   */
/* =============== */
@media (min-width: 768px) {
  aside.right-margin {
    grid-area: right-margin;
    visibility: visible;
    display: block;
  }
  aside.left-margin {
    grid-area: left-margin;
    visibility: visible;
    display: block;
  }
  nav{
    height: 50px;;
    visibility: visible;
    display: flex;
    background-color: var(--nav-color);
    grid-area: nav;
  }
  body {
    grid-template-areas:
      "left-margin header right-margin"
      "left-margin nav right-margin"
      "left-margin main right-margin"
      "left-margin footer right-margin";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr minmax(150px, 1176px) 1fr;
  }
  .menu-button{
    visibility: hidden;
    display: none;
  }
  .sidenav { visibility: hidden; display: none;}
}