Sidebar collapse - how to prevent width transition after refresh

Hello, i'm customizing the sidebar of my application. Everything seems working fine, except one thing. I'm using local storage for save the closed sidebar state after page refresh. It does the job correctly but while refreshing there is a width transition from opened to closed sidebar.

Here is my code

SCSS

#sidebar {
    position: fixed;
    max-width: 260px;
    width: 100%;
    background: whitesmoke;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    transition: all .3s ease;
    z-index: 200;
    a {
        text-decoration: none;
    }
}

#sidebar::-webkit-scrollbar {
    display: none;
}

#sidebar.hide {
    max-width: 60px;
    transition: all .3s ease;
}

#sidebar.hide:hover {
    max-width: 260px;
}

JS

// SIDEBAR COLLAPSE
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
const sidebar = document.getElementById('sidebar');
const sideDropdowns = document.querySelectorAll('#sidebar .side-dropdown');

if (localStorage.getItem("sidebar-collapse")) {
    sidebar.classList.add(localStorage.getItem("sidebar-collapse"));
}

toggleSidebar.addEventListener('click', function () {

    sidebar.classList.toggle('hide');

    if (localStorage.getItem("sidebar-collapse")) {
        localStorage.removeItem('sidebar-collapse');
    } else {
        localStorage.setItem('sidebar-collapse', 'hide');
    }

    if (sidebar.classList.contains('hide')) {
        sideDropdowns.forEach(i => {
            const aLink = i.parentElement.querySelector('a:first-child');

            aLink.classList.remove('active');
            i.classList.remove('show');
        })
    }

})

How to prevent the #sidebar max-width: 260px transition and set max-width: 60px of hide class?

Thanks for help