Как правильно сделать выпадающее бургер меню на чистом JS

html:

<div class="container">
    <div class="header__inner">
        <div class="krea__logo">
            <img src="img/KreaLogo.png" alt="">
        </div>
        <nav class="krea__nav" >
            <ul class="menu__link">
                <li><a data-goto="#Services" class="nav__link" href="#">Services</a></li>
                <li><a data-goto="#Works" class="nav__link" href="#">Works</a></li>
                <li><a data-goto="#References" class="nav__link" href="#">References</a></li>
                <li><a data-goto="#Contact" class="nav__link" href="#">Contact</a></li>
            </ul>
        </nav>
        
        <a class="burger" id="dropDown">
            <span class="burger__item"></span>
        </a>

    </div>
</div><!--/Container-->

Бургер меню используется только в адаптивной вёрстке, поэтому на десктопной версии сайта он скрыт. CSS:

.krea__nav {
        display:  none;
        margin-top: 23px;
        position: absolute;
        background-color: #333366;
        right: 0;
        min-width: 160px;
        z-index: 1;  
    }
       
    .burger {
        z-index: 5;
        display: block;
        position: relative;
        width: 30px;
        height: 18px;
        cursor: pointer;   
    }
    
    .burger span,
    .burger::before,
    .burger::after {
        left: 0;
        position: absolute;
        height: 10%;
        width: 100%;
        transition: all .2s linear;
        background-color: #fff;
    }
    
    .burger::before,
    .burger::after {
        content: "";
    }
    
    .burger::before {
        top: 0;
    }
    
    .burger::after {
         bottom: 0;
    }
    
    .burger span {
        top: 50%;
        transform: scale(1) translate(0px, -50%);
    }
    
    
    .menu__link {
        display: flex;
        flex-direction: column;
        padding: 12px 5px 12px 5px;
        text-decoration: none;
        display: block;
        text-align: left;

    }