Pug: テンプレートにした_header.pug内にあるbodyに対して、URLを条件としてclass名を付与したい

pugのテンプレート拡張を使い記述をしています。
※webpack5を使っています。

_header.pugとして

pug
1block titles
2  - var title = 'Not HTML and CSS'
3  - authenticated = true
4doctype html
5html(lang="ja")
6  head
7    meta(charset="UTF-8")
8    meta(http-equiv="X-UA-Compatible", content="IE=edge")
9    meta(name="viewport", content="width=device-width, initial-scale=1.0")
10    title #{title}
11    block titles
12      - var title = 'トップ';
13  body(class=authenticated ? 'home' : 'anon')
14    header.ly_header
15      .ly_header_container
16        .sitetitle
17          h1.header-logo
18            a(href="/")
19              img(src="../images/header-logo.svg" alt='hogehoge')
20          .navbtn
21        //END .bl_header
22
23
24        -
25
26          var nav = [
27            {
28              title: 'HOME',
29              url: '/'
30            },
31            {
32              title: 'New',
33              url: '/new'
34            },
35            {
36              title: 'Local',
37              url: '/local'
38            },
39            {
40              title: '投稿',
41              url: '/post'
42            },
43            {
44              title: 'インタビュー',
45              url: '/interview'
46            },
47          ]
48        nav
49          ul.header-nav.collapse
50            each elm in nav
51              li: a(href=elm.url)
52                | #{elm.title}
53block pageContent
54

という形で記述をして,index.pugやabout.pugで拡張させていますが、urlに応じてbodyにつくclass名を変化させたいと思っています。

pugの公式ページ: 属性を見ると三項演算子をつかったやり方が書いてあるのですが、それを応用して上述したように条件分岐でclass名を付ける方法がわかりません。

PugではJavaScriptが使えるとのことで

JS
1window.onload = ()=> {
2  // URLの取得
3  let url = location.href;
4  if (url == "http://hoge.com/") {
5    // URLが http://hoge.com/ の場合に実行する処理 
6  } 
7}

といった記述を使えばいいのかとも思ったのですが、現在うまくいっておりません

ご教示下さいましたら幸いです。
よろしくおねがいします。