I am having trouble finding a good solution. The problem is I want a dynamically updated active class on my nav items, however I don't know how to do so. Can anyone help me with a solution for giving the nav item corresponding to the current page a certain class, automatically?
This is my layout.pug page:
doctype html
html(lang="en")
head
include components/head
body(id="page-top" role="document")
include components/header
main
block main
include components/footer
This is what I currently have for my header.pug file:
nav
img.hamburger-menu(src="img/menu/menu-hamburger.svg" alt="Navigation Menu")
ul(class="reveal")
li
a(href="index.html" ) Home
li
a(href="about.html") About
li
a(href="services.html") Services
li
a(href="contact.html") Contact
Then I have my index.pug and other rendered pages, which start like this:
extends ../layout
block main
section
h1 Personally Professional