Changing pages disables navbar menu on Ruby on Rails

I have this problem. When the screen width goes below 1024px, the navbar changes to a responsive navbar that activates when a burger menu is clicked, this is made using javascript (it is being correctly compiled, the file is imported in application.js). This functionality works fine, but when I change pages (from home to store for example) it stops working, and I can't find the reason. Here's the code:

/* Javascript file */

document.addEventListener('DOMContentLoaded', () => {
  let responsiveMenu = document.querySelector('.responsive-navbar');
  let body = document.querySelector('body');
  let burgerBtn = document.querySelector('.burger-menu');
  let responsiveLinks = document.querySelectorAll('.responsive-menu-links')
  burgerBtn.addEventListener('click', () => {
    burgerBtn.classList.toggle('cross')
    responsiveMenu.classList.toggle('menu-open');
    body.classList.toggle('disable-scroll');
    responsiveLinks.forEach(link => {
      link.classList.toggle('trigger-anim')
    })
  })
})

/* _navbar.html.erb partial */

<div class="navbar-header">
  <div class="navbar-menu">
    <%=link_to 'Inicio', root_path%>
    <a href="">ustedes</a>
    <a href="">contacto</a>
    <a href="">sobre mi</a>
    <%=link_to 'Tienda', store_path%>
  </div>
  <div class="burger-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="responsive-navbar">
  <div class="menu-background"></div>
  <div class="menu-links">
     <%=link_to 'Inicio', root_path, class: 'responsive-menu-links'%>
      <a href="" class="responsive-menu-links">ustedes</a>
      <a href="" class="responsive-menu-links">contacto</a>
      <a href="" class="responsive-menu-links">sobre mi</a>
      <%=link_to 'Tienda', store_path, class: 'responsive-menu-links'%>
  </div>
</div>
  <div class="navbar-items">
    <div class="logo">
    </div>
  </div>
</div>

/* styles */

.trigger-anim {
  animation: scaleIn .2s forwards;
}
.menu-open {
  width: 100vw !important;
  a {
    opacity: 1 !important;
  }
}

.disable-scroll {
  overflow: hidden;

  .home-container {
    height: 100vh !important;
    overflow: hidden !important;
  }
}

.cross {
  span {
    &:nth-of-type(1) {
      transform: rotate(40deg) translateY(20px);
    }
    &:nth-of-type(2) {
      transform: translateX(500px);
      opacity: 0;
    }
    &:nth-of-type(3) {
      transform: rotate(-40deg) translateY(-20px);
    }
  }
}