<!-- kss-sidebar -->
<div class="kss-sidebar">
    <header class="kss-sidebar__header">
        <a class="kss-link" href="index.html">
            <h1 class="kss-doc-title">{{ options.title }}</h1>
        </a>
    </header>
    <nav class="kss-nav">
        <ul class="kss-nav__menu">
        {% for menu_item in menu %}
            <li class="kss-nav__menu-item">
                <a class="kss-nav__menu-link" href="section-{{ menu_item.referenceURI }}.html">
                  <!-- <span class="kss-nav__ref">{{ menu_item.referenceNumber }}</span>  -->
                  {{ menu_item.header }}</a>
                <!-- Design links stright to item tempplate -->
                {% if menu_item.isActive and menu_item.children is not empty %}
                <ul class="kss-nav__menu-child">
                    {% for menu_child in menu_item.children %}
                    <li class="kss-nav__menu-item">
                        {% if "design-" in menu_child.referenceURI %}
                        <a class="kss-nav__menu-link kss-design__link" href="item-{{ menu_child.referenceURI }}.html">
                        {% else %}
                        <a class="kss-nav__menu-link" href="section-{{ menu_item.referenceURI }}.html#kssref-{{ menu_child.referenceURI }}">
                        {% endif %}
                            <!-- <span class="kss-nav__ref">{{ menu_child.referenceNumber }}</span> -->
                            {{ menu_child.header }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
        {% endfor %}
        </ul>
    </nav>
</div>
