Sandwich

Sandwich

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

const sandwichToggle = function () {
    // Выбираем элементы, которые нам нужны. В примере мы ищем элементы с классом "sandwich"
    let sandwichElements = document.querySelectorAll('.sandwich');
    // Проходим циклом по всем эдементам и на каждый элемент вешаем слушателя, который по клику будет переключать класс
    sandwichElements.forEach((item) => {
        item.addEventListener('click', showSandwichTarget);
    });

    function showSandwichTarget() {
        let targetId = this.getAttribute('data-target-id'),
            targetClassToggle = this.getAttribute('data-target-class-toggle');
        this.classList.toggle('is-active');
        if (targetId && targetClassToggle) {
            document.getElementById(targetId).classList.toggle(targetClassToggle);
        }
    }
};
sandwichToggle();