<div class="device">
  
  <div class="device__header">
    <i data-feather="align-left"></i>
  </div>
  
  <div class="device__content">
    <div class="list">
      <div class="list__item">
        <div class="image"></div>
        <div class="text">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="list__item">
        <div class="image"></div>
        <div class="text">
          <span></span>
          <span></span>
          <span></span>          
        </div>
      </div>

      <div class="list__item">
        <div class="image"></div>
        <div class="text">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="menu">
    <i data-feather="x"></i>
    
    <div class="nav">
      <div class="nav__item"></div>
      <div class="nav__item"></div>
      <div class="nav__item"></div>
      <div class="nav__item"></div>
    </div>
  </div>
</div>

// Colors
$bg-color: #f1f5ff;

$color-white: #fff;
$color-blue: #7097F1;
$color-blue-dark: #2760E4;
$color-blue-light: #cfdeff;

html, 
body {
  height: 100%;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: $bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device {
  height: 480px;
  width: 300px;
  background: $color-white;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 4px 58px 0px rgba(13,74,215,0.30);
  display: flex;
  flex-direction: column;
  
  .feather {
    color: $color-white;
    cursor: pointer;
  }  
  
  .element {
    height: 15px;
    width: 100%;
  }
  
  &__header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: $color-blue;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  &__content {
    padding: 10px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    width: 100%;

    
    &__item {
      display: flex;
      background: $color-blue-light;
      padding: 10px;
      width: 100%;
      border-radius: 4px;
      
      &:not(:last-child) {
        margin-bottom: 20px;
      }     
      
      .image {
        width: 100px;
        height: 90px;
        background: $color-blue;
        margin-right: 15px;
        border-radius: 4px;
      }
      
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        
        span {
          height: 10px;
          background: $color-blue;
          margin-bottom: 10px;
          display: block;
          border-radius: 4px;
          
          &:nth-child(1) { width: 100%; }
          &:nth-child(2) { width: 70%; }
          &:nth-child(3) { width: 50%; }
        }
      }
    }
  }
}

.menu {
  background: $color-blue-dark;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; 
  
  transform: translateX(-300px);
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: .5s;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  .nav {
    &__item {
      width: 160px;
      height: 20px;
      background: $color-white;
      border-radius: 4px;
      
      transform: translateX(-300px);
      transition-property: transform;
      transition-duration: 0.3s;
      transition-timing-function: ease-in-out;

      &:nth-child(1) { transition-delay: 0.2s; }
      &:nth-child(2) { transition-delay: 0.3s; }
      &:nth-child(3) { transition-delay: 0.4s; }
      &:nth-child(4) { transition-delay: 0.5s; }
      
      &:not(:last-child) {
        margin-bottom: 40px;
      }
    }
  }
  
  .feather {
    position: absolute;
    top: 20px; right: 10px;
  }
  
  &-open {
    transform: translateX(0px);
    transition-delay: 0s;
    
    .nav__item {
      transform: translateX(0px);
    }
  }
}

feather.replace();

$('.feather').on('click', function() {
  $('.menu').toggleClass('menu-open');
});