aerogramme.deuxfleurs.fr/templates/partials/doc/page_toc.html

<aside class="hidden 2xl:block fixed right-0 bottom-1/2 transform translate-y-1/2 w-80 col-span-1 h-auto bg-gray-100 rounded-l-lg shadow-inner">
    {% if page.toc %}
        <div class="w-full flex items-center justify-center py-1.5 bg-gray-200 rounded-tl-lg">
            <span class="uppercase tracking-wide text-xs text-aerogramme-gray">Page content</span>
        </div>
        <ol class="text-sm space-y-0.5 px-8 py-3 list-decimal">
        {% for h1 in page.toc %}
            <li>
                <a href="{{ h1.permalink | safe }}" class="font-semibold text-gray-800 transition-all hover:text-aerogramme-blue">{{ h1.title }}</a>
                {% if h1.children %}
                    <ul class="space-y-0.5 py-0.5">
                        {% for h2 in h1.children %}
                            <li>
                                <a 
                                    href="{{ h2.permalink | safe }}"
                                    id="link-{{ h2.id | safe }}"
                                    class="toc text-gray-700 hover:text-aerogramme-blue">
                                    {{ h2.title }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        </ol>
    {% endif %}
    <div class="bg-gray-100 rounded-bl-lg">
        {% if page.earlier or page.later or page.lighter or page.heavier or page.pages %}
            {% include "partials/doc/pagination.html" %}
        {% elif page.ancestors and page.ancestors | length == 3 %}
            {% include "partials/doc/pagination.html" %}
        {% endif %}
    </div>
</aside>