Sandwich menu

sandwich

.sandwich
  .sandwich__line.sandwich__line--top
  .sandwich__line.sandwich__line--middle
  .sandwich__line.sandwich__line--bottom
	
.sandwich {
  $this: &;
  
  display: none;
  position: relative;
  width: 32px;
  height: 20px;
  cursor: pointer;
  &--active {
    #{$this}__line {
      &--top {
        top: 10px;
        transform: rotate(45deg);
      }
      &--middle { opacity: 0; }
      &--bottom {
        top: 10px;
        transform: rotate(-45deg);
      }
    }
  }
  &__line {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background-color: var(--white);
    left: 0;
    transition: all var(--duration);
    &--top { top: 0; }
    &--middle { top: 9px; }
    &--bottom { top: 18px; }
  }
}

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

});
};
    
    sandwich();