Sidebar reopening animation on page navigation through navbar

So in this JavaScript below I run addEventListener click on a button, if clicked it will add to the .sidebar active class.

const sidebarbtn = document.querySelector('#sidebar-btn');
const sidebar = document.querySelector('.sidebar');

sidebarbtn.addEventListener('click', function () {
    sidebar.classList.toggle('active');
    localStorage.setItem('sidebarActive', sidebar.classList.contains('active'));
});


document.addEventListener('DOMContentLoaded', function () {
    const isSidebarActive = localStorage.getItem('sidebarActive') === 'true';
    if (isSidebarActive) {
        sidebar.classList.add('active');
    }
});

Everything is working. If I open the sidebar and redirect using navbar to another page it will stay opened. The thing I am asking is more esthetical rather than functional.

When I navigate with opened sidebar, it will firstly load closed because it is default then it will open. The same thing happens with dark/light mode using the localStorage. Is there any solution to this?