Могу ли я вызвать 2 действия с помощью одного и того же взлома флажка? Использование CSS

Question

В этом примере у меня есть боковое меню, сдвигающееся слева после того, как установлен флажок «Взломать флажок». Как я могу отбросить тень на всю страницу (перенести фокус на боковое меню), когда меню появляется? Я попытался применить ту же методику с флажком, но похоже, что это не работает. Любая помощь?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}

.color-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  opacity: .58;
  background: #787777;
  transition: 0.1s ease;
}

#hamburger-checkbox:checked ~ .color-overlay{
  width: 100%;
  transition: 0.1s ease;
}

<div class="color-overlay"></div>
<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>

  <nav class="nav">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">Projects</a>
  </nav>
</header>

Answer 1

Как вариант можно добавить псевдоэлемент (ОБНОВЛЕНО):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

#hamburger-checkbox:checked~.color-overlay {
 opacity: .58;
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
  position: relative;
}

.color-overlay {
  width: 100vw;
  position: fixed;
  height: 100vh;
  background: #787777;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 2s ease;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
  z-index: 2;
  position: relative;
}

<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>
  <div class="color-overlay"></div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Projects</a>
  </nav>
</header>