One Navlink not showing

https://github.com/Aman2980/S2-23_Website
Here is a link to the project. In the header on each page I have this nav-item
 <li class="nav-item">
                    <a href="Stats.html" class="nav-link stats">Statistics</a>
                </li>
In the common.css file I set
.nav-link.stats{
    visibility: hidden;
}
to hidden by default. Then inside login.js im selecting that item with
const statsNavItem = document.querySelector('.nav-link.stats'); 
and changing its state based on some conditions
if (username) {
        const legend = document.querySelector('legend h2');
        if (legend) {
            legend.textContent = `WELCOME ${username}`.toUpperCase();
        }
        loginButton.replaceWith(logoutButton);
        statsNavItem.style.visibility = 'visible'; // Make the stats navigation item visible
    } else {
        statsNavItem.style.visibility = 'hidden'; // Hide the stats navigation item
    }
Now my issue is that this statistics page should appear when someone logs in. It does appear but can be accessed from login page and it hidden from each page. How can i make it visible on each page when someone logs in?
GitHub
Contribute to Aman2980/S2-23_Website development by creating an account on GitHub.
GitHub - Aman2980/S2-23_Website
Was this page helpful?