wrath/src/components/astro/nav.astro

86 lines
2 KiB
Text

---
import { en, zh } from "~/config"
import { getLangFromUrl, useTranslations } from "~/i18n/utils"
const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
const { home, archive, custom, links, about } =
lang === "zh" ? zh.navigation : en.navigation
---
<div
class="mb-10 mt-4 flex gap-4 overflow-x-auto whitespace-nowrap text-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
>
{
home && (
<a
href={`/${lang}`}
class="hover:underline hover:underline-offset-4"
data-umami-event="nav-home"
aria-label={t("nav.home")}
title={t("nav.home")}
data-astro-prefetch="viewport"
>
<p>{t("nav.home")}</p>
</a>
)
}
{
archive && (
<a
href={`/${lang}/archive`}
class="hover:underline hover:underline-offset-4"
data-umami-event="nav-archive"
aria-label={t("nav.archive")}
title={t("nav.archive")}
data-astro-prefetch="viewport"
>
<p>{t("nav.archive")}</p>
</a>
)
}
{
custom?.map((tab) => (
<a
href={tab.link}
class="hover:underline hover:underline-offset-4"
target="_blank"
data-umami-event={`nav-${tab.label}`}
aria-label={tab.label}
title={tab.label}
data-astro-prefetch="viewport"
>
<p>{tab.label}</p>
</a>
))
}
{
links && (
<a
href={`/${lang}/links`}
class="hover:underline hover:underline-offset-4"
data-umami-event="nav-links"
aria-label={t("nav.links")}
title={t("nav.links")}
data-astro-prefetch="viewport"
>
<p>{t("nav.links")}</p>
</a>
)
}
{
about && (
<a
href={`/${lang}/about`}
class="hover:underline hover:underline-offset-4"
data-umami-event="nav-about"
aria-label={t("nav.about")}
title={t("nav.about")}
data-astro-prefetch="viewport"
>
<p>{t("nav.about")}</p>
</a>
)
}
</div>