.transform-animation{
  transition: transform 233ms cubic-bezier(0, 0, .21, 1);
}
.dashboard-layout{
  height: 100vh;
  display: grid;

  grid-template-areas: 'main';
  @media (min-width: 768px) { 
    grid-template-columns: 240px 1fr;
    grid-template-areas: "sidebar main";
  }
  .header{
    background: blue;
  }
  .sidebar{
    display:none;
    grid-area: sidebar;
    height: 100%;
    width: 240px;
    position: fixed;
    overflow-y: auto;
    background-color: #394263;
    @media (min-width: 768px) { 
      position: static;
      display:block;
    }
    &.show {
      display: block;
    }
    .sidebar-heading{
      color: rgba(255, 255, 255, 0.515);
      font-size: 1rem;
      padding:1rem;
      padding-bottom:0.25rem;
      margin:0;
    }
    .nav{
      .nav-item{
        .nav-link{
          display:flex;
          align-items:center;
          color: rgba(255, 255, 255, 0.709);
          i{
            display:flex;
            height: 2rem;
            width: 2.5rem;
            font-size: 1.5rem;
          }
          &.active{
            color: white;
            font-weight: bold;
          }
        }
      }
    }
  }
  .main{
    background: white;
    grid-area: main;
    &.sidebar-opened{
      transform: translateX(240px);
      overflow: hidden;
      position: fixed;
      @media (min-width: 768px) {
        transform: none;
        overflow: visible;
        position: static;
      }
    }
  }
}