How to update html conent of multiple pages in .js?

This function updates the html page based on if user is logged in or not. My problem is that I have multiple pages with different conent and this function only updates the index.html page.

Should I create a class called Page add a unique checkUser() function to each page object?
Should I create for each page a seperate checkUser() function. Like checkUserOnSignUp, checkUserOnSignIn, checkUserOnIndex…
Should I update every element of every page in one checkUser() function?
Should I do something else? What do you suggest?

function checkUser() {
    console.log("running ckeckUser");
    currentUser = Moralis.User.current();
    if (currentUser) {
        document.getElementById("navbar_logged_out").style.display = "none";
        document.getElementById("navbar_logged_in").style.display = "block";
        console.log("LoggedIn check");
        

    } else {
        document.getElementById("navbar_logged_in").style.display = "none";
        document.getElementById("navbar_logged_out").style.display = "block";
        console.log("LoggedOut check");
    }
}

Can you not do something server side. Doing it like this will not be very secure. Pressing Ctrl-U will show all of your logged in user content.

How would you do this serverside? I have two navbars. One for logged in user, one for logged out. I check if user is logged in and display the right navbar. Which part can I do on server?

If I press Ctrl-U opnes a tab to publish my website.

All data from user I am retriving from database on server. It has ACL (Access Control List) so user can’t access data without access. The data from the navbar has no sensitive information. Just changes the design and structure.

But my question is since maybe different pages have different things to chnage based on if user is logged in or not I have to create a function for every page? How would I do this best?