Active menu in navbar doesn't highlight subsections / child pages

[h-enk]

Discussed in thuliteio/doks#1178

^{Originally posted by jollydodo January 16, 2024}

Description

Minor change and not necessarily an issue/bug, but something that is normally different and would be a visual improvement. The navbar shows which section is active. This works fine, however, it does not take into account subsections. E.g. if I go to about and then 'about us', neither the parent nor the child have a highlighted element. This is also the case for blog posts for example. 'blog' only stays highlighted on the blog index and not on a single post.

On one of my previous websites I used the default Hugo method ".isMenuCurrent' to highlight the selected link. This method also supports ancestor/child pages out of the box with very simple code. I looked at the Doks implementation and this seems a bit more intricate.

Default Hugo approach:

{{ $currentPage := . }}
{{ range site.Menus.main }}
{{ if $currentPage.IsMenuCurrent .Menu . }}
{{ .Name }}
{{ else if $currentPage.HasMenuCurrent .Menu . }}
{{ .Name }}
{{ else }}
{{ .Name }}
{{ end }}
{{ end }}

Visualization

Picture of another Hugo site: stays highlighted even in a post that is part of 'portfolio' using default Hugo implementation. This tells the user that they are currently viewing an item that is part of 'portfolio'.

Doks: ( "open-inloop" is a child of "over")

Neither 'open-inloop' or 'over' is highlighted as active.

Preferred outcome:

This would make the appearance of the navbar more consistent, because it already works like this for the default 'docs' pages: