Меню бургер на чистом js

window.addEventListener('load', (event) =>
{
    let ButtonMenu = document.querySelector('.burger-menu__button'),
        BurgerMenu = document.querySelector('.burger-menu');

    ButtonMenu.addEventListener('click', () =>
    {
        if(BurgerMenu.classList.contains('burger-menu_active'))
            BurgerMenu.classList.remove('burger-menu_active')
        else BurgerMenu.classList.add('burger-menu_active')
    });
})

header {
    display: flex;

    margin: auto;
    height: 76px;
    box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.75);
}

footer {
    background-color: #01003f;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    z-index: 2000;
}

li {
    list-style-type: none;
}

a {
    margin: 17px;
    text-decoration: none;
}

.burger-menu__button {
    position: fixed;
    top: 90px;
    left: 10px;
    z-index: 30;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2a2a2a;
    transition: 0.4s;
}

.burger-menu__button:hover .burger-menu__lines {
    filter: brightness(0.7);
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: #fff;
}

.burger-menu__lines {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.burger-menu__lines::before {
    content: '';
    top: -10px;
}

.burger-menu__lines::after {
    content: '';
    top: 10px;
}
.burger-menu_active .burger-menu__button,
.burger-menu_active .burger-menu__lines {
    background-color: transparent;
}

.burger-menu_active .burger-menu__lines::before {
    top: 0;
    transform: rotate(45deg);
}

.burger-menu_active .burger-menu__lines::after {
    top: 0;
    transform: rotate(-45deg);

}

.burger-menu__nav {
    padding-top: 80px;
    position: fixed;
    z-index: 20;
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: #2a2a2a;
    overflow-y: auto;
    left: -100%;
    transition: 0.5s;
}

.burger-menu_active .burger-menu__nav {
    left: 0;
}

.burger-menu__link {

    font-size: 25px;
    text-decoration: none;

}

.burger-menu__link:hover {
    filter: brightness(0.7);
}

.burger-menu__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.burger-menu_active .burger-menu__overlay {
    display: block;
}

<div class="wrapper">
    <header>.</header>
    <main>
        <div class="burger-menu">
            <a href="#" class="burger-menu__button"><span class="burger-menu__lines"></span></a>
            <nav class="burger-menu__nav">
                <a href="#" class="burger-menu__link">Create table</a>
                <a href="#" class="burger-menu__link">Buttons</a>
                <a href="#" class="burger-menu__link">Sliders</a>
                <a href="#" class="burger-menu__link">Students table</a>
                <a href="#" class="burger-menu__link">Progress Bar(Promises)</a>
                <a href="#" class="burger-menu__link">Map</a>
                <a href="#" class="burger-menu__link">jQuery table</a>
                <a href="#" class="burger-menu__link">Mediator pattern</a>
            </nav>
        </div>
    </main>
    <footer></footer>
</div>