leilukin-site/src/_includes/toc.njk

<aside class="left-sidebar">
    <details class="toc__wrapper" open>
        <summary class="toc__heading">
            Contents
        </summary>
        {{ content | toc | safe }}
    </details>
</aside>

<style>
    .toc__wrapper {
        position: sticky;
        top: 4rem;
    }

    .toc__heading {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--clr-sub-heading);
        cursor: pointer;
    }

    .toc ol,
    .toc ol ol  {
        display: grid;
        gap: 0.3em;
    }

    .toc ol {
        border-top: 0.1em solid var(--clr-title-border);
        padding-left: 1.5em;
        padding-top: 1em;
    }

    .toc ol ol {
        border-top: none;
        list-style-type: disc;
        padding-left: 1.5em;
        padding-top: 0.3em;
    }

    .toc ol a {
        font-size: 1.1rem;
        padding-left: 0.3em;
    }

    .toc ol ol a {
        padding: 0;
        font-size: 1rem;
    }
</style>

<script defer>
    // Close article ToC accordion for small screen sizes
    const tocWrapper = docucument.querySelector('.toc__wrapper');
    if (window.innerWidth < 480) {
        tocWrapper.removeAttribute("open");
    } else {
        tocWrapper.setAttribute("open", true);
    }

    // Remove the stickiness of the sidebar ToC if it is larger than screen height
    function preventSidebarOverflow() {
        if (document.documentElement.clientHeight < tocWrapper.offsetHeight + 50) {
            tocWrapper.style.marginTop = "0";
            tocWrapper.style.position = "static";
        }
    }
    preventSidebarOverflow();
</script>