Sandwich

Sandwich

.sandwich
	.sandwich__line.sandwich__line--top
	.sandwich__line.sandwich__line--middle
	.sandwich__line.sandwich__line--bottom
	
.sandwich {
  cursor: pointer;
  display: none;
  height: 20px;
  position: relative;
  width: 32px;
  @media screen and (max-width: $tablet-wide) { display: block; }
  &--active {
    .sandwich__line {
      &--top {
        top: 10px;
        transform: rotate(45deg);
      }
      &--middle { opacity: 0; }
      &--bottom {
        top: 10px;
        transform: rotate(-45deg);
      }
    }
  }
  &__line {
    background-color: $white;
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all linear .4s;
    width: 100%;
    &--top { top: 0; }
    &--middle { top: 9px; }
    &--bottom { top: 18px; }
  }
}

var sandwich = function () {
        $(document).on('click', '.sandwich', function () {
            $(this).toggleClass('sandwich--active');

        });
    };