Assigning Style CSS to brother component (active)

Question

How to make calling the action . Burger:active change the style of the menu component on the same hierarchical level

Components/Nav/index.js

import React from "react";
import { NavContainer } from "./styles";

export default function Nav() {
  return (
    <NavContainer>
      <div className="logo">Logo</div>
      <ul className="menu">
        <li>
          <a href="/">Menu1</a>
        </li>
        <li>
          <a href="/">Menu2</a>
        </li>
        <li>
          <a href="/">Menu3</a>
        </li>
      </ul>
      <div className="burger">
        <div className="linha1" />
        <div className="linha2" />
        <div className="linha3" />
      </div>
    </NavContainer>
  );
}

Components/Nav/Styles.js

import styled from "styled-components";

export const NavContainer = styled.nav`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: darkgray;
  align-items: center;
  min-height: 8vh;

  ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    width: 30%;
  }

  .burger {
    display: none;
  }

  .burger div {
    background: white;
    width: 25px;
    height: 4px;
    margin: 3px;
    border-radius: 2px;
  }

  .burger:active {
    .linha1 {
      margin: 0;
      transform: rotate(45deg);
    }
    .linha2 {
      margin: 0;
      display: none;
    }
    .linha3 {
      margin: 0;
      transform: rotate(-45deg);
    }
    .menu {
      transform: translateX(0%);
      background: red;
    }
  }

  @media screen and (max-width: 700px) {
    .burger {
      display: block;
    }

    ul {
      justify-content: space-around;
      position: absolute;
      top: 8vh;
      right: 0px;
      flex-direction: column;
      align-items: center;
      height: 92vh;
      background: darkgray;
      transform: translateX(100%);
    }
  }
`;

---

To get around this situation I created a stylized class where a toggle is given in the menu via the Burger click event.

Answer 1

So ... CSS is a language with cascade reading, IE, nothing can be done from bottom to top, so for you to select a sibling element, it needs to come after the selector.

<div className="app">
  <div className="logo">[...]</div>
  <div className="burger">[...]</div>
  <ul className="menu">[...]</ul>
</div>

And only then could you access the brother element through the selector burger:active ~ .menu{}

If it is of paramount importance that your Burger is the last child, being presented right after the menu, you can make use of the property order: [numeroDeOrdem] of the flexbox layout to sort the position of these elements, as shown below:

.burger{ order: 2 }

.menu{ order: 1 }

.burger:active{
  [regras de estilo para o burger quando clicado]
}

.burger:active ~ .menu{
  [regras de estilo para o menu quando o burger é clicado]
}

I made an example for visualization purposes in Jsfiddle: https://jsfiddle.net/viniciusColares/7kmpj59r/15/