We would like to create a two-level menu in the left sidebar in a custom template and

Creating two-level navigation is not obvious about kss-node HOT 3 CLOSED

kss-node commented on July 20, 2024

Creating two-level navigation is not obvious

from kss-node.

Comments (3)

JohnAlbin commented on July 20, 2024

Hmm… given what I've learned about Handlebars over the weekend, that should work.

I'll have to take a look at #eachRoot and see what is going on.

from kss-node.

JohnAlbin commented on July 20, 2024

BTW, https://github.com/htanjo/kss-node-template has a multi-level navigation sidebar.

      <nav class="kss-nav">
        <ul class="kss-menu" data-kss-ref="{{rootNumber}}">
          <li class="kss-menu-item"><a href="./"><span class="kss-ref">0</span><span class="kss-name">Overview</span></a></li>
          {{#eachRoot}}
          <li class="kss-menu-item"><a href="section-{{reference}}.html"><span class="kss-ref">{{reference}}</span><span class="kss-name">{{header}}</span></a></li>
          {{/eachRoot}}
        </ul>
        {{#unless overview}}
        <ul class="kss-menu-child">
          {{#eachSection rootNumber}}
          {{#whenDepth 2}}
          <li class="kss-menu-item"><a href="#section-{{reference}}"><span class="kss-ref">{{reference}}</span><span class="kss-name">{{header}}</span></a></li>
          {{/whenDepth}}
          {{/eachSection}}
        </ul>
        {{/unless}}
      </nav>

But it uses a bit of JS to get the kss-menu-child positioned in the right place in the nav.

from kss-node.

JohnAlbin commented on July 20, 2024

The {{../reference}} variable works fine for me.

But creating a 2-level navigation is non-obvious. The code you want is:

    <nav><ul>
      <li><a href="index.html">0.0: Overview</a></li>
    {{#eachRoot}}
      <li><a href="section-{{reference}}.html">{{reference}}.0: {{header}}</a>
        <ul>
        {{#eachSection reference}}
          {{#ifDepth 2}}
            <li><a href="section-{{../../reference}}.html#{{reference}}">{{reference}}: {{header}}</a>
          {{/ifDepth}}
        {{/eachSection}}
        </ul>
      </li>
    {{/eachRoot}}
    </ul></nav>