CSS active sibling

by Vinicius Colares

HTML

<div id="app"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

  .app{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: darkgray;
    align-items: center;
    min-height: 8vh;
  }

  ul {
    order: 1;
    display: flex;
    list-style: none;
    justify-content: space-between;
    width: 30%;
  }
  
  .burger{
    order: 2;
  }

  .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%);
    }
  }

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <div className="app">
        <div className="logo">Logo</div>
        <div className="burger">
          <div className="linha1" />
          <div className="linha2" />
          <div className="linha3" />
        </div>
        <ul className="menu">
          <li>
            <a href="/">Menu1</a>
          </li>
          <li>
            <a href="/">Menu2</a>
          </li>
          <li>
            <a href="/">Menu3</a>
          </li>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))