src/components/MobileNavigation.astro

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