File size: 2,036 Bytes
01fcadf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
---
import { Icon } from "astro-icon/components";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import HeaderButton from "./HeaderButton.astro";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
import { MARKETPLACE_ENABLED } from "astro:env/client";
---
<div
class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto"
id="mobileNavMenu"
>
<HeaderButton text={t("header.home")} route={`/${lang}/`}>
<Icon
name="ph:house-bold"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
<HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
<Icon
name="ph:cube"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
<HeaderButton
text={t("header.settings")}
route={`/${lang}/settings/appearance`}
>
<Icon
name="ph:wrench-fill"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
{MARKETPLACE_ENABLED &&
<HeaderButton text={t("header.catalog")} route={`/${lang}/catalog/1`}>
<Icon
name="ph:shopping-bag-open-fill"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
}
<HeaderButton text={t("header.morelinks")}>
<Icon
name="ph:link-bold"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
</div>
<script>
import { fade } from "astro:transitions";
import { isMobileNavOpen } from "../store.js";
function closeMobileNav() {
isMobileNavOpen.set(false);
}
const mobileNavMenu = document.getElementById("mobileNavMenu");
mobileNavMenu!.addEventListener("click", closeMobileNav);
</script>
|