Cacher is the code snippet organizer for pro developers

.hamburger
	position: relative
	z-index: 100
	float: right
	pointer-events: auto
	-webkit-tap-highlight-color: transparent
	display: none
	margin: 30px 0 0 0
	cursor: pointer
	transition-property: opacity, -webkit-filter
	transition-property: opacity, filter
	transition-property: opacity, filter, -webkit-filter
	transition-duration: 0.15s
	transition-timing-function: linear
	font: inherit
	color: inherit
	text-transform: none
	background-color: transparent
	border: 0
	overflow: visible
	+r(1279)
		display: block
	&__box
		width: 23px
		height: 16px
		display: block
		position: relative
	&__inner
		display: block
		top: 50%
		margin-top: -1px
		width: 23px
		height: 2px
		background-color: #222
		position: absolute
		transition-property: -webkit-transform
		transition-property: transform
		transition-property: transform, -webkit-transform
		transition-duration: 0.15s
		transition-timing-function: ease
		+r(1023)
			background-color: #222
		&::before, &::after
			width: 23px
			height: 2px
			background-color: #222
			position: absolute
			transition-property: -webkit-transform
			transition-property: transform
			transition-property: transform, -webkit-transform
			transition-duration: 0.15s
			transition-timing-function: ease
			+r(1023)
				background-color: #222
		&::before, &::after
			content: ""
			display: block
		&::before
			top: -7px
		&::after
			bottom: -7px
	&.is-active &__inner
		background-color: #000
	&.is-active &__inner:before,
	&.is-active &__inner:after
		background-color: #000
	&_spin &__inner
		transition-duration: 0.3s
		transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
		&::before
			transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in
		&::after
			transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
			transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
			transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
	&.is-active &__inner
		-webkit-transform: rotate(225deg)
		transform: rotate(225deg)
		transition-delay: 0.14s
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
		&::before
			top: 0
			opacity: 0
			transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out
		&::after
			bottom: 0
			-webkit-transform: rotate(-90deg)
			transform: rotate(-90deg)
			transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1)
			transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1)
			transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1)
      
      .is-active for activate the toggler!! =>>>>>>>>>>>>>>>>>>>>

function headerToggle() {
  const $header = $('.js-header');
  const $hamburger = $('.js-hamburger');

  $hamburger.on('click', function () {
    const $this = $(this);

    $this.toggleClass('is-active');
    $header.toggleClass('is-visible');
    BODY.toggleClass('is-locked');
  });

  WINDOW.on('resize', function () {
    $hamburger.removeClass('is-active');
    $header.removeClass('is-visible');
    BODY.removeClass('is-locked');
  });
}

+b.hamburger._spin.js-hamburger
	+e.box
		+e.inner