How do I access the brother element to open the side menu

Question

When I was doing like this:

* {
    margin: 0;
    padding: 0;
}
.fa-file-excel {
    color: green;
    background-color: #f9f9f9;
}
body {
    background-color: #f9f9f9;
}
header {
    height: 50px;
    width: 100%;
    position: absolute;
    background-color: #296FA7;
}
#check {
    display: none;
}

#icone {
    cursor: pointer;
    padding: 15px;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;
}

.barra {
    /* top: 50px; */
    /* background-color:rgb(255, 255, 255); */
    background-color:#333;
    height: 100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear;
    left: -300px;
}

.nav-side-menu {
    width: 100%;
    position: absolute;
    /* top:50px; */
}

.nav-side-menu a {
    text-decoration: none;
}

.link {
    background-color: #494950;
    padding: 8px 16px 8px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all 0.2s linear;
    color: #fafaf9;
    border-bottom: 2px solid #222;
    opacity: 0;
    margin-top: 200px;
}

.link:hover {
    background-color: #050542;
}

.icon-menu {
    display: inline-block;
}
#check:checked ~ #icone {
    transform: translateX(300px);
}



#check:checked ~ .barra {
    transform: translateX(300px);
}

#check:checked ~ .barra .nav-side-menu a .link{
    opacity: 1;
    margin-top: 0;
    transition-delay: .2s;
}

<input type="checkbox" id="check">
<label for="check" id="icone" ><img src="img/icone.png"></label> 
<div class="barra">
    <div class="nav-side-menu">
        <a href=""><div class="link">
                    <div class="icon-menu"><i class="fas fa-file-excel"></i></div>
                        Home
                    </div>
        </a>
        <a href=""><div class="link">R</div></a>
        <a href=""><div class="link">S</div></a>
        <a href=""><div class="link">L</div></a>
        <a href=""><div class="link">C</div></a>
</div>

Everything worked fine, then when I started to separate and change the structure, I’m not able to do the same effect, because my button:active ~ div . bar does not access the bar, where I am missing?

* {
    margin: 0;
    padding: 0;
}
.fa-file-excel {
    color: green;
    background-color: #f9f9f9;
}
body {
    background-color: #f9f9f9;
}
header {
    height: 50px;
    width: 100%;
    position: absolute;
    background-color: #f9f952;
}

.icon-hamburguer {
    width: 35px;
    height: 4px;
    background-color: #f9f9f9;
    margin: 6px 0;  
    transition: all .2s linear;   
}

#check {
    display: none;
}

button {
    cursor: pointer;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;
}

#icone {
    cursor: pointer;
    padding: 15px;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;
}

.barra {
    /* top: 50px; */
    /* background-color:rgb(255, 255, 255); */
    background-color:#333;
    height: 100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear;
    left: -300px;
}

.nav-side-menu {
    width: 100%;
    position: absolute;
    /* top:50px; */
}

.nav-side-menu a {
    text-decoration: none;
}

.link {
    background-color: #494950;
    padding: 8px 16px 8px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all 0.2s linear;
    color: #fafaf9;
    border-bottom: 2px solid #222;
    opacity: 0;
    margin-top: 200px;
}

.link:hover {
    background-color: #050542;
}

.icon-menu {
    display: inline-block;
}

button:active ~ div .barra {
    transform: translateX(300px);
}

button:active ~ div .barra  .nav-side-menu a .link{
    opacity: 1;
    margin-top: 0;
    transition-delay: .2s;
}

<header>
    <nav class="navbar-icon"> 
        <button class="navbar-toggler navbar-toggler-left" type="button" id="">
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
        </button>
    </nav>
</header>
<div class="barra">
    <div class="nav-side-menu">
        <a href=""><div class="link">
                    <div class="icon-menu"><i class="fas fa-file-excel"></i></div>
                        Home
                    </div>
        </a>
        <a href=""><div class="link">Relatórios</div></a>
        <a href=""><div class="link">S</div></a>
        <a href=""><div class="link">L</div></a>
        <a href=""><div class="link">C</div></a>
    </div>

Answer 1

^{Tatah first of all, I’m giving you a tip. It’s not ear-jerk, it’s constructive criticism okay. You need to understand what you’re doing before you change things. I say this because you need to understand the concept and how the HTML elements behave so that your CSS works as you expect.}

Note that in the example you posted that works the Trigger Open menu pro is done with a input:checkbox that is hidden. when you click on label who has a for for this checkbox he gets like :checked and open the side menu.

When you removed the input:checkbox and the label HTML, then switched to css :checked for :active ai that you have "gutted" with the whole structure :D

See in the example, I left the comments code to help you. Now it’s working as you expect.

OBS: I left the input:checkbox visible, for you to understand that when it is marked the menu opens, and unchecked it closes the menu.

* {
    margin: 0;
    padding: 0;
}
.fa-file-excel {
    color: green;
    background-color: #f9f9f9;
}
body {
    background-color: #f9f9f9;
}
header {
    height: 50px;
    width: 100%;
    position: absolute;
    background-color: #f9f952;
}

.icon-hamburguer {
    width: 35px;
    height: 4px;
    background-color: #f9f9f9;
    margin: 6px 0;  
    transition: all .2s linear;   
}

#check {
    display: none;
}

label {
    cursor: pointer;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;

    /* estilos para deixar label visualmente igual o Button */
    border: 1px solid #999;
    background-image: linear-gradient(to bottom, #eee, #bbb);
    padding: 3px;
    border-radius: 3px;
}

#icone {
    cursor: pointer;
    padding: 15px;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;
}

.barra {
    /* top: 50px; */
    /* background-color:rgb(255, 255, 255); */
    background-color:#333;
    height: 100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear;
    left: -300px;
}

.nav-side-menu {
    width: 100%;
    position: absolute;
    /* top:50px; */
}

.nav-side-menu a {
    text-decoration: none;
}

.link {
    background-color: #494950;
    padding: 8px 16px 8px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all 0.2s linear;
    color: #fafaf9;
    border-bottom: 2px solid #222;
    opacity: 0;
    margin-top: 200px;
}

.link:hover {
    background-color: #050542;
}

.icon-menu {
    display: inline-block;
}

/* input quando checado abre o menu */
#btn:checked ~ .barra {
    transform: translateX(300px);
}

#btn:checked ~ div .barra .nav-side-menu a .link{
    opacity: 1;
    margin-top: 0;
    transition-delay: .2s;
}

<!-- input que vc pode esconder com display:none, mas que vai ser acessado e marcado quando clica na label -->
<input type="checkbox" name="" id="btn">

<header>
    <nav class="navbar-icon"> 
        <!-- label com o for para o ID do checkbox que abre o menu -->
        <label for="btn" class="navbar-toggler navbar-toggler-left" type="button" id="">
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
        </label>
    </nav>
</header>
<div class="barra">
    <div class="nav-side-menu">
        <a href=""><div class="link">
                    <div class="icon-menu"><i class="fas fa-file-excel"></i></div>
                        Home
                    </div>
        </a>
        <a href=""><div class="link">Relatórios</div></a>
        <a href=""><div class="link">S</div></a>
        <a href=""><div class="link">L</div></a>
        <a href=""><div class="link">C</div></a>
    </div>
</div>