When page reloads the active will disappear

I am try to add active class when user clicks the nav item. The class will be applied and when the page will redirect to another page the class will be disappered.

HTML

 <section id="sidebar">
        <a href="#" class="brand">
            <i class='bx bxs-smile'></i>
            <span class="text">Admin</span>
        </a>
        <ul class="side-menu top">
            <li class="active btn">
                <a href="index.php">
                    <i class='bx bxs-dashboard'></i>
                    <span class="text">Dashboard</span>
                </a>
            </li>
            <li class="btn">
                <a href="adminstration.php">
                    <i class='bx bxs-shopping-bag-alt'></i>
                    <span class="text">Adminstraion</span>
                </a>
            </li>
        </ul>
    </section>
    <!-- SIDEBAR -->

JS

const allSideMenu = document.querySelectorAll('#sidebar .side-menu.top li a');

allSideMenu.forEach(item=> {
    const li = item.parentElement;

    item.addEventListener('click', function () {
        allSideMenu.forEach(i=> {
            i.parentElement.classList.remove('active');
        })
        li.classList.add('active');
    })
});

The issue I’m facing is the active class will be removed when the page reloads. How to fix this issue?
Thanks in advance