---
import Default from "@astrojs/starlight/components/Sidebar.astro";
import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";
// @ts-ignore
import MobileMenuFooter from "virtual:starlight/components/MobileMenuFooter";
import { storage } from "../lib/storage";
import { titlecase } from "@/lib/utils";

const tags = await storage.getAllTags();

const { sidebar: astroSidebar } = Astro.locals.starlightRoute;
const tagsFromApi = {
    type: "group" as const,
    label: "Vocabulary",
    badge: undefined,
    entries: tags.map((tag) => ({
        type: "link" as const,
        label: titlecase(tag.name),
        href: `/vocabulary/${tag.name}`,
        isCurrent: Astro.url.pathname === `/vocabulary/${tag.name}`,
        badge: undefined,
        attrs: {},
    })),
};

// Replace vocabulary with tags fetched from api
const sidebar = astroSidebar.map((item: any) => {
    if (item.label === "Vocabulary") {
        return tagsFromApi;
    }
    return item;
});
---

<SidebarPersister>
    <SidebarSublist sublist={sidebar} />
</SidebarPersister>

<div class="md:sl-hidden">
    <MobileMenuFooter />
</div>
