Fiz um btn:checked que deveria expandir o container .side-bar, mas ele não expande!
Já tentei colocar ele antes da side-bar no html, ele antes dela no css, eles 2 ao mesmo tempo antes dela e ainda assim não funciona.
HTML:
<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>
CSS:
.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;
}
.menu .menu-btn:checked ~ .side-bar {
width: 100px;
height: 100vh;
}
Nesse código postado é como eu gostaria que ficasse primeiramente, porém não funcionou, obviamente.