Боковое прозрачное меню сайта на HTML + CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

<div class="karkas_navigatora">
  <input type="checkbox" id="check">
  <div class="asexon_one">
  <label for="check">
  <i class="fas fa-bars"></i>
  </label>
  </div>
  <div class="slaydera_navigatsia">
  <div class="avormena">
  <a href="#">Навигация</a>
  </div>
  <div class="asexon_two">
  <label for="check">
  <i class="fas fa-times"></i>
  </label>
  </div>
  <div class="navegatus">
  <ul>
   
  <li>
  <i class="fas fa fa-cog"></i>
  <a href="#">Каталоги</a>
  </li>
  <li>
  <i class="fas fa fa-database"></i>
  <a href="#">Разделы</a>
  </li>
  <li>
  <i class="fas fa-binoculars"></i>
  <a href="#">Оформление</a>
  </li>
  <li>
  <i class="fas fa-download"></i>
  <a href="#">Дизайнер</a>
  </li>
  <li>
  <i class="fas fa-cloud"></i>
  <a href="#">веб-мастер</a>
  </li>
  <li>
  <i class="fas fa-phone-volume"></i>
  <a href="#">Ваши контакты</a>
  </li>
  <li>
  <i class="far fa-comments"></i>
  <a href="#">Обратная связь</a>
  </li>
  </ul>
  </div>
  <div class="sotsialm_adukia">
  <ul>
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-youtube"></i></a>
  </ul>
  </div>
  </div>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.karkas_navigatora{
  position: relative;
  background: url('https://cs4.pikabu.ru/post_img/big/2016/05/25/6/1464163350188194633.jpg') right no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
.karkas_navigatora .slaydera_navigatsia {
  position: fixed;
  height: 100vh;
  width: 296px;
  left: -296px;
  background: rgb(226 220 220 / 18%);
  box-shadow: 0px 0px 6px rgb(173 162 162 / 50%);
  overflow: hidden;
  transition: all 0.3s linear;
}
.slaydera_navigatsia .avormena{
  position: absolute;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}
.slaydera_navigatsia .avormena a{
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  position: absolute;
  left: 50px;
  line-height: 60px;
  text-decoration: none;
}
.slaydera_navigatsia .navegatus{
  position: absolute;
  top: 80px;
  width:100%;
}
.slaydera_navigatsia .navegatus li {
  margin-top: 5px;
  padding: 12px 18px;
}
.slaydera_navigatsia .navegatus i{
  color: #fdf3f3;
  font-size: 20px;
  padding-right: 8px;
}
.slaydera_navigatsia .navegatus a{
  color: #fdf3f3;
  font-size: 20px;
  text-decoration: none;
}
.slaydera_navigatsia .navegatus li:hover {
  border-left: 0.8px solid #9fbdc3;
  box-shadow: 0 0 2px rgb(214 214 214 / 50%);
}
.slaydera_navigatsia .sotsialm_adukia{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  list-style: none;
  cursor: pointer;
}
.slaydera_navigatsia .sotsialm_adukia i{
  text-decoration: none;
  padding: 0 5px;
  color: #fff;
  opacity: 0.6;
  font-size: 20px;
}
.slaydera_navigatsia .sotsialm_adukia i:hover{
  opacity: 1;
  transition: all 0.1s linear;
  transform: scale(1.01);
}
#check{
  display: none;
}
.karkas_navigatora .asexon_one i{
  color: #fdf3f3;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 16px;
  line-height: 60px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s linear;  
}
  .slaydera_navigatsia .asexon_two i{
  font-size: 25px;
  line-height: 60px;
  position: absolute;
  left: 240px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s linear;
}
.asexon_one i:hover{
  font-size: 29px;
}
.asexon_two i:hover{
  font-size: 24px;
}
#check:checked ~ .slaydera_navigatsia{
  left: 0;
}
#check:checked ~ .asexon_one i{
  opacity: 0;
}
#check:checked ~ .slaydera_navigatsia .asexon_two i {
  opacity: 1;
  color: #e7fbff;
}