Determining Current Menu Parent with Sections (not explicit menu)

support
1

I am using v0.22 features, as documented by @bep’s test site. That means the traditional options such as Highlight Section’s Menu Item when in any page of that section don’t seem to be applicable.

In the menus, when we iterate by {{ range .page.Sections}}, I am having trouble with:

  1. Only displaying the current sub-tree, which should be doable as long as I can figure out which nodes are parents (including grandparents) of the page I’m currently on.
  2. Highlighting parents by adding an active class to them. This should be the same challenge as #1.

I am pasting my menu rendering here, so you can see where I’m at:

<!-- layouts/partials/menu_include.html -->
{{ $home := .Site.Home }}
<div class="css-treeview box">
    {{ .Site.Menus }}
    <ul>
        <li {{ if .InSection $home }} class="active" {{ end }}>
            <a href="/index.html" class="mdl-components__link parent">
                <i class="fa home fa-lg fa-fw"></i>
                Home
            </a>
        </li>
        {{ template "section-tree-nav" (dict "page" $home "current" $ ) }}
    </ul>
</div>

{{ define "section-tree-nav" }}
    {{ $current := .current }}
    {{ range .page.Sections}}
    <li>
        <!-- TODO: Active isn't showing when we are multiple levels down the tree -->
        <a href="{{ .URL }}" class="mdl-components__link parent is-section {{ if .InSection $current }}is-active{{ end }}">
            <i class="fa {{ .Title | urlize }} fa-lg fa-fw"></i>
            {{ .Title }}
            [{{ $current }}]
            {{ if .InSection $current }}[InSecCur]{{ end }}
        </a>
        {{ if .InSection $current }}
        <ul>
            {{ range .Pages }}
                <li>
                    <a href="{{ .RelPermalink }}" class="is-page">
                        <i class="fa {{ .Title | urlize }} fa-lg fa-fw"></i>
                        {{ .Title }}
                    </a>
                </li>
            {{ end }}
            <!-- NOTE: When there are no children, this ends a harmless but excess ul tag: -->
            <ul>
                {{ template "section-tree-nav" (dict "page" . "current" $current ) }}
            </ul>
        </ul>
        {{ end }}
    </li>
    {{ end }}
{{ end }}

The $current variable always goes to the page I’m on, when I was hoping it would stay at the top level section I was on. However, this may be the wrong approach so I’m open to input. As I don’t have anything in the .Site.Menus map (no explicit menuing in my config file), the IsMenuCurrent and HasMenuCurrent don’t seem to work at all.

Please let me know if you need more of the site to look at.

2

Hi @rmspeers. Did you find a solution for this?