Mobile Nav drop-down will not close when I click on the same hamburger I opened it with

Question

I have a mobile navbar that drops down I click on the open hamburger and closes when I click on the close icon.

Now the problem is I also want the drop down to close when the user clicks on the open drop down twice or clicks outside the navbar dropdown, but it's not working. I need help please

const mobileMenu = document.querySelector('.nav-right-mobile i');
const dropDown = document.querySelector('.nav-right');
const cancel = document.querySelector('.cancel')

mobileMenu.addEventListener('click', () => {
        dropDown.style.display = 'block' 
})

cancel.addEventListener('click', () => {
    dropDown.style.display = 'none'
})


window.addEventListener('click', function(e){
    if(e.target === dropDown){
        dropDown.style.display = 'none'
    }

})

##I was hoping that the last event listener will close the drop down if open once the user clicks the same hamburger twice or clicks outside the navbar drop-down but it is not working.

======================HTML============================

<nav>
        <div class="upper-nav">
            <a href="#"><img src="/images/topLogo.55926006.svg"
                 class="logo-color"></a>  
        </div>
        <div class=" container lower-nav">
            <div class="nav-left">
                <a href="#home" class="logo-white" ><img src="/images/logoWhite.8b1d1362.png"></a>
                <a href="#home" class="logo-gray" ><img src="/images/logoScroll.5afbf69d.png"></a>
            </div>

            <div class="nav-right">
                <ul>
                    <div class="mobile-top">
                        <a href="#home" class="logo-gray-mobile" ><img src="/images/logoScroll.5afbf69d.png"></a>
                        <div class="cancel"><i class="uil uil-times"></i></div>
                    </div>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Events</a></li>
                    <button class="btn">REGISTER NOW</button>
                </ul>
            </div>
            <div class="nav-right-mobile">
                <i class="uil uil-bars"></i>
            </div>
        </div>
    </nav>

====================================CSS========================

.nav-right{
    display: none;
    background: white;
    width: 40vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.nav-right ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    padding: 0 2rem;
}

.nav-right ul a{
    color: black;
}

.nav-right ul button{
    margin-top: 36rem;
}

.mobile-top{
    overflow: hidden;
    width: 34vw;
    height: 5rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
   
}

.logo-gray-mobile{
    height: 100px;
    width: 100px;
}

.cancel{
    font-size: 2rem;
}

.nav-right-mobile{
    display: block;
    font-size: 2rem;
    color: var(--color-light);
    font-style: myFontHeavy;
    font-weight: bold;
    cursor: pointer;
}

Answer 1

Your Mobile menu should be in toggle state, that is you have to store the state of the menu, and open or close it depending on the state.

let open = false
mobileMenu.addEventListener('click', () => {
  if(open){
   dropDown.style.display = 'none'
   open = false;
  }else{
    dropDown.style.display = 'block'  
    open = true

 }

})