Pug nav template with active link checker

navigation.pug

block PrimaryNavigation
  - var NavItems = [{'url':'home','title':'Home', 'img':'nav','key':'home'},{'url':'about-us','title':'About Us', 'img':'nav','key':'about-us'}];

header
  each page,i in NavItems
    if PageID === page.url
      a(class="active", href= + page.url + '.html')
        svg
          use(xlink:href= 'img/sprites/' + page.img + '.svg#' + page.key)
        span.name= page.title
    else
      a(href= page.url + '.html')
        svg
          use(xlink:href= 'img/sprites/' + page.img + '.svg#' + page.key)
        span.name= page.title

page.pug

block variables
  - var SiteName = "Sample Site"
  - var PageName = "Home"
  - var PageID = 'home';

doctype html
html(lang="en", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink")

  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta(name='description', content='')
    title= PageName + ' / ' + SiteName

    include stylesheets.pug
    block stylesheets

  body
    include navigation.pug
    .page-wrapper
        block content

    include scripts.pug
    block scripts