HTML - Hidden sidebar html

Código para esconder el menú que tienes en tu sitio web

Esto lo encontramos con IA de BlackBox
Este sitio web esta super genial. Saquen provecho de ella.

HTML

<input type="checkbox" id="check">

    <label for="check">

      <i class="fas fa-bars" id="btn"></i>

      <i class="fas fa-times" id="cancel"></i>

    </label>

    <div class="sidebar">

    <header>My App</header>

  <ul>

<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>

<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>

<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>

<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>

<li><a href="#"><i class="far fa-question-circle"></i>About</a></li>

<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>

<li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>

</ul>

</div>

<section></section>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');

*{

  padding: 0;

  margin: 0;

  list-style: none;

  text-decoration: none;

}

body {

  font-family: 'Roboto', sans-serif;

}

.sidebar {

  position: fixed;

  left: -250px;

  width: 250px;

  height: 100%;

  background: #042331;

  transition: all .5s ease;

}

.sidebar header {

  font-size: 22px;

  color: white;

  line-height: 70px;

  text-align: center;

  background: #063146;

  user-select: none;

}

.sidebar ul a{

  display: block;

  height: 100%;

  width: 100%;

  line-height: 65px;

  font-size: 20px;

  color: white;

  padding-left: 40px;

  box-sizing: border-box;

  border-bottom: 1px solid black;

  border-top: 1px solid rgba(255,255,255,.1);

  transition: .4s;

}

ul li:hover a{

  padding-left: 50px;

}

.sidebar ul a i{

  margin-right: 16px;

}

#check{

  display: none;

}

label #btn,label #cancel{

  position: absolute;

  background: #042331;

  border-radius: 3px;

  cursor: pointer;

}

label #btn{

  left: 40px;

  top: 25px;

  font-size: 35px;

  color: white;

  padding: 6px 12px;

  transition: all .5s;

}

label #cancel{

  z-index: 1111;

  left: -195px;

  top: 17px;

  font-size: 30px;

  color: #0a5275;

  padding: 4px 9px;

  transition: all .5s ease;

}

#check:checked ~ .sidebar{

  left: 0;

}

#check:checked ~ label #btn{

  left: 250px;

  opacity: 0;

  pointer-events: none;

}

#check:checked ~ label #cancel{

  left: 195px;

}

#check:checked ~ section{

  margin-left: 250px;

}

section{

  background: url(bg.jpeg) no-repeat;

  background-position: center;

  background-size: cover;

  height: 100vh;

  transition: all .5s;

}