5 replies

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.

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
    }

GitHub

GitHub - Aman2980/S2-23_Website

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

One Navlink not showing

One Navlink not showing

Similar Threads

Similar Threads

Similar Threads