btn:checked should expand a container but it doesn’t work!

Question

I did a btn:checked that should expand the container . side-bar, but it does not expand!

I tried to put it before the side-bar in html, it before it in css, they 2 at the same time before it and still doesn’t work.

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;
} 

This code posted is how I would like it to be first, but it didn’t work, obviously.

Answer 1

all right? then in that case you will have to resort to javascript, if that’s what I’m thinking, currently 11/02/2021 there are no CSS selectors that are possible to select a parent element (I may be wrong, so it’s not a statement). Finally we go to the code:

For javascript I just implemented a click event on the element with id "menu-btn"(checkbox) and with a conditional structure will be checked if it is checked or unchecked, if it is checked a class will be added to the element with the class "side-bar", which I called "expand-side-bar", in unchecked the same will remove the class.

In CSS I just modified the selection you implemented ". menu . menu-btn:checked ~ . side-bar" and created the class "expand-side-bar"

Comment if you have questions about the code or if this is the solution you expected, hugging and good studies!

Note: I commented some excerpts of HTML, because I do not have the images of its encoding.

document.getElementById("menu-btn").onclick = function() {
  if (this.checked) {
    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>