website/src/components/TOC.astro

---
import { useTranslations } from "@i18n/utils";
import type { MarkdownHeading } from "astro";
const t = useTranslations(Astro.url);

type Props = {
  headings: MarkdownHeading[];
};

const { headings } = Astro.props;
---

<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
  <details
    class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2"
  >
    <summary class="text-lg cursor-pointer select-none"
      >{t("toc.title")}</summary
    >
    <div class="flex flex-col gap-[2px] my-2">
      {
        headings.map((heading) => {
          return (
            <a
              href={`#${heading.slug}`}
              style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
              class={`block text my-0`}
            >
              {heading.text}
            </a>
          );
        })
      }
    </div>
  </details>
</div>