node.js - Using Express-Handlebars, how can I set an Item to active from my Navigation Bar?

Question

Recently, I implement Express-Handlebars and with it, came a problem: I can't seem to be able to set my current navigation bar to active. I've looked into tons of posts but it either doesn't work (maybe I'm doing something wrong?) or it is not the Handlebars I'm using.

Here is my current code, taken from an online tutorial:

Header.hbs:

      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item {{#if active.Register}}active{{/if}}" class="navbar-right">
          <a class="nav-link" href="/Register">Register</a>
        </li>
        <li class="nav-item {{#if active.Login}}active{{/if}}" class="navbar-right">
          <a class="nav-link" href="/Login">Login</a>
        </li>
      </ul>

routes:

app.get('/Login', function(req, res) {
    res.render('Login', { title: "Login"});
});

app.get('/Register', function(req, res) {
    res.render('Register', { title: "Register"});
});

Any tips would be greatly appreciated! Thanks!

Answer 1

I'm not sure when you wanna set it to active but you need to pass active.register when it needs to be active.

so something like this:

app.get('/Login', function(req, res) {
    res.render('Login', { title: "Login" , active: {Register: true }});
});

this will make your handlebars login li to "nav-item active", obviously you are going to implement logic to determine Register is true or false.