Module «btn-burger». Кнопка «бургер» для мобильного меню

Демо:

https://codepen.io/ildar-meyker/pen/RwqbGoY

Плагины:

Подключение:

//

Разметка:

//
<button class="btn-burger">
    <span></span>
    <span></span>
    <span></span>
</button>

Стили:

//
.btn-burger {
    @include reset-button;
    padding: 4px;
    line-height: 0;

    span {
        transition: all 0.2s;
        display: block;
        background: #204a8f;
        margin: 5px 0;
        height: 3px;
        width: 23px;
    }

    &.active {
        span {
            &:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }
            &:nth-child(2) {
                opacity: 0;
            }
            &:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
        }
    }
}

Инициализация:

// burger-menu.js

function handleOpenBtn() {
    openPanel();
}
function handleCloseBtn() {
    closePanel();
}

function openPanel() {
    $("body").addClass("locked");
    $("#panel-burger").addClass("active");
}

function closePanel() {
    $("body").removeClass("locked");
    $("#panel-burger").removeClass("active");
}

const handleMediaChange = (event) => {
    if (!event.matches) {
        closePanel();
    }
};

$(function () {
    $(document).on("click", ".js-burger-open", handleOpenBtn);
    $(document).on("click", ".js-burger-close", handleCloseBtn);

    const mediaQueryMobile = window.matchMedia("(max-width: 999.98px)");
    mediaQueryMobile.addEventListener("change", handleMediaChange);
    handleMediaChange(mediaQueryMobile);
});