<ul>
    <li>
        <h2>Design System</h2>
        <ul>
            <li>
                <a href="{{ '/horizon-design-system' | url }}">Overview</a>
            </li>
            <li>
                <a href="{{ '/tokens/typography' | url }}">Typography</a>
            </li>
            <li>
                <a href="{{ '/tokens/color' | url }}">Color</a>
            </li>
            <li>
                <a href="{{ '/tokens/spacing' | url }}">Spacing</a>
            </li>
            <li>
                <a href="{{ '/tokens/elevation' | url }}">Elevation</a>
            </li>
            <li>
                <a href="{{ '/tokens/border-radius' | url }}">Border Radius</a>
            </li>
            <li>
                <a href="{{ '/tokens/transition' | url }}">Transition</a>
            </li>
            <li>
                <a href="{{ '/tokens/z-index' | url }}">Z-index</a>
            </li>
            <li>
                <a href="{{ '/tokens/more' | url }}">More Tokens</a>
            </li>
            <li>
                <a href="{{ '/horizon-design-system/#adoption-status' | url }}">HDS Adoption Status</a>
            </li>
        </ul>
    </li>
    
    <li>
        <h2>Forms</h2>
        <ul>
            <li>
                <a href="{{ '/forms' | url }}">Overview</a>
            </li>
        </ul>
    </li>

    <li>
        <h2>Components</h2>
        <ul>
            {% for component in meta.components %}
                <li>
                    <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
                        {{ component.name | classNameToComponentName }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </li>
    
    <!-- uncomment to show components in sidebar section order
        {% for sectionName in meta.sidebarSectionOrder %}
            {% if meta.componentsBySection[sectionName] %}
                <li>
                    <h2>{{ sectionName }}</h2>
                    <ul>
                        {% for component in meta.componentsBySection[sectionName] %}
                            <li>
                                <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
                                    {{ component.name | classNameToComponentName }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}
        {% endfor %}
        {# Include any sections not in the defined order (fallback) #}
        {% for sectionName, components in meta.componentsBySection %}
            {% set isInOrder = false %}
            {% for orderedSection in meta.sidebarSectionOrder %}
                {% if orderedSection == sectionName %}
                    {% set isInOrder = true %}
                {% endif %}
            {% endfor %}
            {% if not isInOrder %}
                <li>
                    <h2>{{ sectionName }}</h2>
                    <ul>
                        {% for component in components %}
                            <li>
                                <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
                                    {{ component.name | classNameToComponentName }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}
        {% endfor %}
    -->
</ul>