// Please ❤ if you like it

// update 25/4/2019
// I'd noticed that there are a lot of people who seem interested in this pen so I changed a little bit in the logic so it would fit better on production sites and make it easier to read!

div.menu
  button.nav-tgl(type='button' aria-label='toggle menu')
    // this span just for the three dividers in the hamburger button
    span(aria-hidden='true')

  nav.nav
    // I don't care about the menu elements here so I will hide them
    ul
      li element one
      li element two
      li element three
      li element four

.nav {
  ul {
    display: none;
  }
}

.nav-tgl {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 100;
  right: 30px;
  top: 30px;
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  box-shadow: 0px 4px 24px rgba(#000, 0.24);
  line-height: 0.6;
  text-align: center;
  
  // making the dividers
  > span {
    // the second divider
    display: inline-block;
    position: relative;
    height: 2px;
    width: 34px;
    border-radius: 1px;
    background: #293335;
    vertical-align: middle;
    
    // the first & the third dividers
    &:before, &:after {
      display: inline-block;
      position: absolute;
      content: "";
      height: 2px;
      border-radius: 1px;
      background: #293335;
      // for the hover state
      transition: all 200ms;
    }
    &:before {
      top: -11px;
      left: 3px;
      width: 28px;
    }
    &:after {
      top: 11px;
      left: 6px;
      width: 22px;
    }
  }
  
  // ofcorse we should find a replacement for the focus state but it's not our topic
  &:focus {outline: none}
  
  &:hover > span:after, &:hover > span:before {
    width: 34px;
    left: 0;
  }
}

// for the nav background (styling the nav itself is not our topic)
.nav:before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  transition: all 500ms ease-in-out;
  
  // that's all the pen about
  clip-path: circle(30px at calc(100% - 65px) 65px);
  // for AT
  visibility: hidden;
}

// when it gits activated
.menu.active {
  .nav:before {
    visibility: visible;

    // that's all the pen about
    clip-path: circle(100%);
  }
  
  .nav-tgl > span {
    height: 0;
    &:after, &:before {
      top: 0px;
      left: 0;
      width: 34px;
    }
    &:after {
      transform: rotate(-45deg);
    }
    &:before {
      transform: rotate(45deg);
    }
  }
}

const menu = document.querySelector('.menu');
const btn = menu.querySelector('.nav-tgl');
btn.addEventListener('click', evt => {
  menu.classList.toggle('active');
})