{% set section = get_section(path="documentation/_index.md") %}
<aside id="global_toc" class="relative col-span-1 h-full bg-gray-100 shadow-inner border-r border-t border-gray-200">
    {% if section.subsections %}
        <ul id="main-toc-menu" class="space-y-2 px-6 py-3 list-none">

            {% if section.pages %}
                {% for page in section.pages %}
                    <a 
                        href="{{ page.permalink | safe }}"
                        class="bg-white border border-aerogramme-blue block p-1 rounded font-semibold hover:bg-aerogramme-blue hover:bg-opacity-20
                        {% if current_path == page.path %} activePage text-aerogramme-blue border-opacity-100 border-aerogramme-blue {% endif %}">
                        {{ page.title }}
                    </a>
                {% endfor %}
            {% endif %}

        {% for subsec in section.subsections %}
            {% set h1 = get_section(path=subsec) %}
            <li class="relative">
                <a 
                    href="{{ h1.permalink | safe }}"
                    class="bg-white border border-aerogramme-blue block p-1 rounded-r rounded-tl font-semibold {% if current_path == h1.path %}activePage text-aerogramme-blue font-semibold border-opacity-100 border-aerogramme-blue{% else %}text-gray-800{% endif %}">
                    {{ h1.title }}
                </a>
                {% if h1.pages %}
                    <input
                        type="checkbox"
                        id="btn-{{ h1.title | slugify }}"
                        class="deploySubMenu"
                    />
                    <label for="btn-{{ h1.title | slugify }}" class="absolute top-0 right-0.5 bg-aerogramme-blue bg-opacity-10 border-l border-aerogramme-blue border-opacity-20 cursor-pointer inline-block px-3 py-1" style="margin-top:0.08rem;">
                        <svg class="arrow w-6 h-6 text-aerogramme-gray group-hover:text-aerogramme-blue transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                    </label>
                    <ul class="subMenu border-l border-aerogramme-blue space-y-0.5">
                        {% for h2 in h1.pages %}
                            <li>
                                <a 
                                    href="{{ h2.permalink | safe }}"
                                    class="docPage block pl-2 py-1 border-l-4 rounded-r border-opacity-0 hover:bg-aerogramme-blue hover:bg-opacity-20
                                    {% if current_path == h2.path %} activePage text-aerogramme-blue font-semibold border-opacity-100 border-aerogramme-blue {% endif %}">
                                    {{ h2.title }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        </ul>
    {% endif %}
</aside>