37 lines
865 B
Plaintext
37 lines
865 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 px-4 rounded-xl border border-neutral flex flex-col 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>
|