I have a Vue JS application and I am facing a problem regarding the Toggle menu

<button class="navbar-toggler navbar-toggler-right align-self-center" type="button" @click="toggleMobileSidebar()">
 <span class="mdi mdi-menu"></span>
</button>

toggleMobileSidebar: () => {
 document.querySelector('#sidebar').classList.toggle('active');
},

When accessing the home (/) of my application, using a smartphone, the menu opens and adapts to the size of the window perfectly, and also it opens to list the options only when I click the toggle button.

However, when clicking on a router-link, being at /, and when opening a new /users page, for example, the toggle menu starts open. What could be happening.

I am available to send more codes of my application.

        <router-link to="/admin-users" class="admin-pages-stat">
          <div class="card bg-gradient-danger card-img-holder text-white mt-2 mb-2">
            <div class="card-body">
              <h4 class="font-weight-normal mb-3">Users <i class="mdi mdi-account-multiple mdi-24px float-right"></i>
              </h4>
              <h2 class="mb-2">{{total_users}}</h2>
            </div>
            <div class="card-footer text-center more-info text-white">
              <small>More Options</small>
              <i class="mdi mdi-arrow-right-bold-circle mr-2 ml-1 more-info-icon"></i>
            </div>
          </div>
         </router-link>