Kevin Powell - Community•2y ago

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>

 <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;
}

.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');

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
    }

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

GitHub - Aman2980/S2-23_Website

Contribute to Aman2980/S2-23_Website development by creating an account on GitHub.

1 Reply

Aman•2y ago

You can test it out on this website https://main--s2-23.netlify.app/ Go to login page and use you name as username and reverse of your name as password now it should take you to stats.html but the statistics navitem is not visible but as soon as you click on login in the navbar, its visible and if you click on statistics, its hidden again and its not even visible from other pages

Gaming

Programming

One Navlink not showing