JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div>
  <div class='hamburger'>
    <input class='clickable' />
    <div class='bar'></div>
  </div>
  <nav class='nav'>
    <ul>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
    </ul>
  </nav>
</div>

SCSS

.hamburger {
  display: inline-block;
  position: relative;
  
  .bar {
    position: absolute;
    top: 13px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #444;
  }
}

.clickable {
  outline: none;
  border: 2px solid #444;
  border-right: 0;
  border-left: 0;
  height: 4px;
  width: 20px;
  font-size: 0px;
}

.clickable:hover {
  cursor: pointer;
}

.hamburger:hover {
  cursor: pointer;
  
  .clickable {
    border-color: tomato;
    cursor: pointer;
  }
  
  .bar {
    background: tomato;
  }
}

.clickable:focus {
  border-color: tomato;
  
  & + .bar {
    background: tomato;
  }
}


.clickable:focus + .nav {
  display: block;
}

.nav {
  display: none;
}

ul, nav, li {
  margin: 0;
  padding: 0;
}