Как сделать выдвижной блок?

Народ, нужна помощь. Хочу сделать так, чтобы .sidebar выдвигался плавно с левой стороны на всю ширину экрана с блоками внутри него(т.е.,когда он выдвинется на всю ширину экрана, тогда в нем будут находиться блоки любой ширины и высоты) при нажатии на #chevron , при этом header и content должны оставаться на месте(в неподвижном состоянии).

  <div class="wrap">
<div class="sidebar flex">
  <i class="fas fa-chevron-right" id="chevron"></i>
</div>
<div class="header flex">
    header
</div>
<div class="content flex">
    content
</div>

    body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: #fff;
}
.wrap{
  display: grid;
  grid-template-columns: 5% 95%;
  grid-template-rows: 30% 70%; 
  height: 100vh;
  width: 100vw;
  background-color: green;
}
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar{
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: #900;
}
.sidebar i{
  font-size: 50px;
}
#chevron{
  cursor: pointer;
}
.header{
  background-color: #000;
}
.content{
  background-color: #f3f3; 
}