Closing burger-menu with a swipe

So I don't really know javascript that well and I have a project deadline coming up and I already did the opening with a click, but I need it to close when you swipe it. so if someone knows please just tell me what to do and NOT start explainig because I don't have time for it, I'm really tight in time

    function navSlide() {
        const burger = document.querySelector(".burger-icon ul");
        const nav = document.querySelector(".menu-div");
    
    
        burger.addEventListener("click",() => {
            //Toggle Nav
            nav.classList.toggle("nav-active");
    
    
            //Burger Animation
            burger.classList.toggle("toggle");
        });
    
    }
    
    navSlide();

    .menu-div{
        position:absolute;
        left:0px;
        width:287px;
        top:0px;
        background-color:var(--headercolor);
        height:812px;
        font-size:11px;
        font-weight: bold;
        transform:translateX(-100%);
        transition:transform 0.5s ease-in;

    .nav-active{
    transform: translateX(0%);
}

            <div class="burger-icon">
               <ul> 
                    <li class="bar1"></li>
                    <li class="bar2"></li>
                    <li class="bar3"></li>
                </ul>
            </div>
              
        <h5 class="logo">LOGO</h5>
        <div class="user-photo">
            <img src="static\img\christopher-campbell-28567-unsplash.png" alt="">
        </div>
        <div class="menu-div">
            <nav>
                <h5 class="burger-logo">LOGO</h5>
                <ul class="nav-links">
                    <li><img src="static\img\home.png" alt="">HOME</li>
                    <li><img src="static\img\discover.png" alt=""></i>DISCOVERY</li>
                    <li><img src="static\img\photos.png" alt="">PHOTOS</li>
                    <li><img src="static\img\mail.png" alt="">CONTACT</li>
                    <li><img src="static\img\christopher-campbell-28567-unsplash.png" alt="">PROFILE</li>
                </ul>
            </nav>

Solution

You need to use jQueryUI swipe event (or any other library that simplifies that for you)

Then

$(window).on('click swipe', '.burger-icon ul', function () {
    $(this).toggleClass("nav-active toggle");
});

This is plain JS swipe event