website/src/components/TOC.astro

37 lines
877 B
Plaintext

---
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>