Nav won't open without refreshing after it's been clicked on and closed

I'm trying to figure out how to make my navbar open again, without refreshing the page, after it has already been opened and automatically closed. So far when I click on the menu burger, nav opens (from translateX(100%) to translateX(0%), and when I click on one of the links the nav closes and takes me to the section connected to the link. After the nav closes I can't open it by clicking the burger menu without refreshing the page. How can I fix that? My code regarding my navbar is below.

HTML

 <nav class="navbar" id="navbar"> 
            <ul class="bubbles">
                <li>
                    <a href="#myoffers" id="offers-link" class="offersp" > 01. My offers</a>
                </li>
                <li>
                    <a href="#work" id="work-link" class="workp"> 02. My work</a>
                </li>
                <li>
                    <a href="./schedule.html" id="contact-link" > 03. Contact me</a>
                </li>
                <li>
                    <a href="./hire.html" id="hire-link"> 04. Hire me</a>
                </li>
            </ul>
            <div class="burger">
                <div class="line"></div>
                <div class="line1"></div>
                <div class="line2"></div>
            </div>
        </nav>  

CSS

.bubbles{
    display: block;
    z-index: 5;
    background: linear-gradient(to right, #a239ca, #4717f6);
    position: absolute;
    right: 0px;
    top: 35px;
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

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

.bubbles-passive{
    transform: translateX(100%);
}

@keyframes bubblesFade{
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.bubbles li{
    list-style: none;
    opacity: 0;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #e7dfdd;
    margin: 5px;
    transition: all 0.5s ease;
}

.burger{
    position: absolute;
    right: 0px;
    margin: 10px;
    display: block;
    cursor: pointer;
}

.toggle .line{
    transform: rotate(-45deg) translate(-5px,6px);
}

.toggle .line1{
    opacity: 0;
}

.toggle .line2{
    transform: rotate(45deg) translate(-5px,-6px);
}

.reset .line{
    transform: rotate(0deg) translate(0px, 0px);
}

.reset .line1{
    opacity: 1;
}

.reset .line2{
    transform: rotate(0deg) translate(0px, 0px);
}

JavaScript

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.bubbles');
  const bubbles = document.querySelectorAll('.bubbles li');

  burger.addEventListener('click', () => {
    nav.classList.toggle('bubbles-active');

    bubbles.forEach((link, index) => {
      if(link.style.animation){
        link.style.animation = ''
      } else {
        link.style.animation = `bubblesFade 0.5s ease forwards ${index / 7 + 0.3}s`;
      console.log(index / 7);
      }
    });

    burger.classList.toggle('toggle');
  });

}

navSlide();

const navPassive = () => {
    const burger = document.querySelector('.burger');
    const offers = document.querySelector('.offersp');
    const work = document.querySelector('.workp');
    const navbar = document.querySelector('.bubbles');
    const bubblesLinks = document.querySelectorAll('.bubbles li');

    offers.addEventListener('click', () => {
        navbar.classList.toggle('bubbles-passive');

        burger.classList.toggle('reset');
    });

    work.addEventListener('click', () => {
        navbar.classList.toggle('bubbles-passive');

        burger.classList.toggle('reset');
    });
}

navPassive();