ExpressJs: using Navbar on views - css

Question

I'm using ExpressJS and EJS as my Views.
in my navbar I have links that need to have a class="active" when the user is on that current page. put if I use partials in my views. how am I going to do it?
sample
Index.ejs
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/Index">Home</a></li>
<li>About</li>
<li>Work</li>
</ul>
About.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li><a class="active" href="/About">About</a></li>
<li>Work</li>
</ul>
Work.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li><a class="active" href="/Work">Work</a></li>
</ul>
that is my way of doing it!.. by making a navbar everytime I make a new page
how should I make it that when i render a new page is doesn't need to render the navbar again?

Answer 1

You could pass the value of the "active" route as a local var to the partial..
<%- include('partial/nav', {active: "About"}); %>
Then, check the active var to set the "active" class in the nav partial template:
<ul class="nav navbar-nav navbar-right">
<li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
<li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
<li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>
Here's a similar approach

Answer 2

You should load your navigation like this--
<script>
$("#header").load("header.ejs");
</script>
Then retrieve the url of the current page and from that retrieve the active page name . Then use this function to add the active class to the current page,
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
NOTE: you need to retrieve the page name from your url through some function as it would be the full page url.
You will have to write the header.ejs only once and include it on every page.
Hope this helps!