<nav>

    <ul class="list">

        <li class="title">
            <a href="{{relativeURL depth pageType 'root'}}">{{documentationMainName}}</a>
        </li>

        <li class="divider"></li>

        {{#compare menu "===" 'normal' }}
            {{> search-input }}
        {{/compare}}

        <li class="chapter">
            <a data-type="chapter-link" href="{{relativeURL depth pageType 'root'}}"><span class="fa fa-home"></span>Getting started</a>
            <ul class="links">
                {{#if readme}}
                    <li class="link">
                        <a href="{{relativeURL depth pageType 'root'}}" {{#compare name "===" 'index' }} class="active" {{/compare}}><span class="fa fa-file-text-o"></span>README</a>
                    </li>
                    <li class="link">
                        <a {{#compare context "===" 'readme'}} href="{{relativeURL depth pageType 'root'}}overview.html" {{/compare}}
                            {{#compare context "===" 'overview'}} href="{{relativeURL depth pageType 'root'}}overview.html" {{/compare}}
                            {{#compare context "!==" 'overview'}} href="{{relativeURL depth pageType 'root'}}overview.html" {{/compare}}
                            {{#compare context "!==" 'readme'}} href="{{relativeURL depth pageType 'root'}}overview.html" {{/compare}}
                            {{#compare name "===" 'overview' }} class="active" {{/compare}}>
                            <span class="fa fa-th"></span>Overview
                        </a>
                    </li>
                {{else}}
                    <li class="link">
                        <a href="{{relativeURL depth pageType 'root'}}" {{#compare name "===" 'overview' }} class="active" {{/compare}}>
                            <span class="fa fa-th"></span>Overview
                        </a>
                    </li>
                {{/if}}
            </ul>
        </li>

        {{#if modules}}
        <li class="chapter">
            <a data-type="chapter-link" href="./{{relativeURL ../depth ../pageType 'root'}}modules.html" {{#compare name "===" 'modules' }} class="active" {{/compare}}>
                <span class="fa fa-archive"></span>
                <span>Modules</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#modules-links"
                    {{else}}
                        data-target="#xs-modules-links"
                    {{/compare}}
                ></span>
            </a>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="modules-links"
                {{else}}
                    id="xs-modules-links"
                {{/compare}}>
                {{#each modules}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}modules/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if components}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-cogs"></span>
                <span>Components</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#components-links"
                    {{else}}
                        data-target="#xs-components-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="components-links"
                {{else}}
                    id="xs-components-links"
                {{/compare}}>
                {{#each components}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}components/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if directives}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-code"></span>
                <span>Directives</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#directives-links"
                    {{else}}
                        data-target="#xs-directives-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="directives-links"
                {{else}}
                    id="xs-directives-links"
                {{/compare}}>
                {{#each directives}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}directives/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if classes}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-file-code-o"></span>
                <span>Classes</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#classes-links"
                    {{else}}
                        data-target="#xs-classes-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="classes-links"
                {{else}}
                    id="xs-classes-links"
                {{/compare}}>
                {{#each classes}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}classes/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if routes}}
        <li class="chapter">
            <a data-type="chapter-link" href="{{relativeURL depth pageType 'root'}}routes.html" {{#compare name "===" 'routes' }} class="active" {{/compare}}><span class="fa fa-code-fork"></span>Routes</a>
        </li>
        {{/if}}

        {{#if injectables}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-long-arrow-down"></span>
                <span>Injectables</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#injectables-links"
                    {{else}}
                        data-target="#xs-injectables-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="injectables-links"
                {{else}}
                    id="xs-injectables-links"
                {{/compare}}>
                {{#each injectables}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}injectables/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if interfaces}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-info"></span>
                <span>Interfaces</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#interfaces-links"
                    {{else}}
                        data-target="#xs-interfaces-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="interfaces-links"
                {{else}}
                    id="xs-interfaces-links"
                {{/compare}}>
                {{#each interfaces}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}interfaces/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if pipes}}
        <li class="chapter">
            <div class="simple">
                <span class="fa fa-plus"></span>
                <span>Pipes</span>
                <span class="menu-toggler fa fa-angle-up" data-toggle="collapse"
                    {{#compare menu "===" 'normal' }}
                        data-target="#pipes-links"
                    {{else}}
                        data-target="#xs-pipes-links"
                    {{/compare}}></span>
            </div>
            <ul class="links collapse in"
                {{#compare menu "===" 'normal' }}
                    id="pipes-links"
                {{else}}
                    id="xs-pipes-links"
                {{/compare}}>
                {{#each pipes}}
                    <li class="link">
                        <a href="{{relativeURL ../depth ../pageType 'internal'}}pipes/{{name}}.html" {{#compare ../name "===" name }} class="active" {{/compare}}>{{ name }}</a>
                    </li>
                {{/each}}
            </ul>
        </li>
        {{/if}}

        {{#if miscellaneous}}
        <li class="chapter">
            <a data-type="chapter-link" href="{{relativeURL depth pageType 'root'}}miscellaneous.html" {{#compare name "===" 'miscellaneous' }} class="active" {{/compare}}><span class="fa fa-cubes"></span>Miscellaneous</a>
        </li>
        {{/if}}

        {{#unless disableCoverage}}
        <li class="chapter">
            <a data-type="chapter-link" href="{{relativeURL depth pageType 'root'}}coverage.html" {{#compare name "===" 'coverage' }} class="active" {{/compare}}><span class="fa fa-tasks"></span>Documentation coverage</a>
        </li>
        {{/unless}}

        {{#unless hideGenerator}}
        <li class="divider"></li>
        <li class="copyright">
                Documentation generated using <a href="https://compodoc.github.io/compodoc/" target="_blank">
                    {{#if theme }}
                        {{#compare theme "indexof" 'readthedocs,vagrant,postman'}}
                            <img src="{{relativeURL depth pageType 'root'}}/images/compodoc-vectorise-inverted.svg" class="img-responsive">
                        {{else}}
                            <img src="{{relativeURL depth pageType 'root'}}/images/compodoc-vectorise.svg" class="img-responsive">
                        {{/compare}}
                    {{else}}
                    <img src="{{relativeURL depth pageType 'root'}}/images/compodoc-vectorise.svg" class="img-responsive">
                    {{/if}}
                </a>
        </li>
        {{/unless}}

    </ul>

</nav>
