I've encountered a small issue while working on my personal project and I'm seeking some guidance. The technologies I'm using include Bootstrap4, ejs templating engine, and express. In my project, the Navbar display differs based on whether the user is signed in or not - showing Sign in when they're not signed in and Account when they are.
Below is a snippet of the relevant part of the Navbar:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Some link </a>
</li>
<li class="nav-item navbar-item " id="nav-signIn">
<a class="nav-link" href="/signIn">Sign in</a>
</li>
<li class="nav-item dropdown navbar-item" id="nav-account">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
This JavaScript function controls the display logic on the client side:
function displayAccountOrSignIn() {
if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
document.querySelector('#nav-account').style.display = 'none'
}
else {
document.querySelector('#nav-signIn').style.display = 'none'
}
}
The issue I'm facing is that the Navbar appears to be 'jerking' as it loads the HTML first and then hides the elements that should not be displayed. One possible solution would be to check cookies on the server-side and conditionally render parts of the Navbar, but I'm not sure if this is the best approach. Any suggestions would be greatly appreciated.