tudo bem? então nesse caso você terá que recorrer ao javascript, se for o que estou pensando, atualmente 11/02/2021 não há seletores CSS que seja possível selecionar um elemento pai(posso estar errado, então não é uma afirmação). Enfim vamos ao código:
Para o javascript apenas implementei um evento de click no elemento com id "menu-btn"(checkbox) e com uma estrutura condicional será verificado se o mesmo está checked ou unchecked, caso esteja checked será adicionado uma classe para o elemento com a classe "side-bar", que eu chamei de "expand-side-bar", no unchecked o mesmo irá remover a classe.
No CSS apenas modifiquei a seleção que você implementou ".menu .menu-btn:checked ~ .side-bar" e criei a classe "expand-side-bar"
Comente caso esteja com dúvidas sobre o código ou se essa é a solução que esperava, abração e bons estudos!
Obs: comentei alguns trechos do HTML, pois eu não possuo as imagens da sua codificação.
document.getElementById("menu-btn").onclick = function() {
if (this.checked == true) {
document.querySelector(".side-bar").classList.add("expand-side-bar")
} else {
document.querySelector(".side-bar").classList.remove("expand-side-bar")
}
}
.side-bar {
width: 50px;
height: 100vh;
position: absolute;
background: linear-gradient(#00545d, #000729);
right: 0;
top: 0;
transition: 1s ease-out;
}
.menu-icon {
display: block;
width: 25px;
margin: 40px auto;
cursor: pointer;
}
.expand-side-bar {
width: 100px;
height: 100vh;
}
<div class="side-bar">
<div class="menu">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><!--<img src="img/menu.png" class="menu-icon">--></label>
</div>
<div class="social-links">
<ul>
<!-- <li><a href="#"><img src="img/fb.png"></a></li>
<li><a href="#"><img src="img/ig.png"></a></li>
<li><a href="#"><img src="img/tw.png"></a></li> -->
</ul>
</div>
</div>