<div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
    <div class="no-scrollbar h-full overflow-auto pb-10">
        <div class="space-y-2">
            <p class="font-medium">On This Page</p>
            <ul class="m-0 list-none">
                {% if page.toc %}
                {% with roottoc = page.toc | list %}
                {% with toc = roottoc if roottoc | length > 1 else roottoc[0].children %}
                {% for h2 in toc %}
                <li class="mt-0 pt-2">
                    <a class="inline-block no-underline transition-colors hover:text-foreground text-muted-foreground"
                        href="{{ h2.url }}">{{ h2.title }}</a>
                    {% if h2.children %}
                    <ul class="m-0 list-none pl-4">
                        {% for h3 in h2.children %}
                        <li class="mt-0 pt-2">
                            <a class="inline-block no-underline transition-colors hover:text-foreground text-muted-foreground"
                                href="{{ h3.url }}">{{ h3.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
                {% endwith %}
                {% endwith %}
                {% endif %}
            </ul>
        </div>
    </div>
</div>