Hello all,
I'm working on a custom navigation for our front-end Zendesk help center (Guide). Ideally, this navigation will live on all pages -- including the homepage, category page, section page, and article page -- and would utilize a handlebars helper (rather than using Javascript to populate this).
See below screenshot for reference of the navigation that I'd like to implement on our home_page.hbs, category_page.hbs, section_page.hbs and article_page.hbs:
The obvious "Zendesk Helper" would be {{category_tree_with_article}}; two comments on this, however:
- This helper is only available on the homepage
- This helper doesn't seem to scale with a hierarchy of 3+ levels (for Zendesk Guide - Enterprise feature)
Does anyone have a good way of achieving this? Below, I've included my "solution" to the problem (to iterate through at least 2 levels of subsections), but it's messy and most importantly, it doesn't work on section or article pages.
<ul class="accordion">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li><span class="accordion__title sidenav-item">{{name}}</span>
<ul>
{{#each sections}}
<li {{#if internal}}class="hidden"{{/if}}>
<a class="accordion__title sidenav-item">{{name}} {{#if internal}}<span class="icon-lock" title="{{t 'internal'}}"></span>{{/if}}</a>
<ul>
{{#if articles}}{{#each articles}}<li><a href="{{url}}">{{title}}</a></li>{{/each}}{{/if}}
{{#if sections}}
{{#each sections}}
<li {{#if internal}}class="hidden"{{/if}}>
<span class="accordion__title sidenav-item">{{name}} {{#if internal}}<span class="icon-lock" title="{{t 'internal'}}"></span>{{/if}}</span>
<ul>
{{#if articles}}{{#each articles}}<li><a href="{{url}}">{{title}}</a></li>{{/each}}{{/if}}
</ul>
</li>
{{/each}}
{{/if}}
</ul>
</li>
{{/each}}
</ul>
</li>
{{/if}}
{{/each}}
</ul>
