// 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');
})