src/components/Header.astro

---
import { MARKETPLACE_ENABLED } from "astro:env/client";
import { Icon } from "astro-icon/components";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import { isMobileNavOpen } from "../store.js";
import HeaderButton from "./HeaderButton.astro";
import Logo from "./Logo.astro";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<div
  id="navbar"
  class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4 z-30 relative"
>
  <div class="w-1/8">
    {/* Typical desktop menu */}
    <div class="relative flex-row hidden lg:flex">
      <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"
        />
        {
          /* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
        }
      </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>
    {/* Mobile hamburger menu */}
    <div class="flex lg:hidden" id="mobileNavTrigger" transition:persist>
      <Icon
        name="ph:text-align-justify-bold"
        class="h-9 w-9 text-text-color"
        id="hamburger_menu"
      />
      <Icon
        name="ph:caret-right-bold"
        class="h-9 w-9 text-text-color hidden"
        id="right_caret"
      />
    </div>
  </div>
</div>
<script>
  import { isMobileNavOpen } from "../store.js";
  let isMobileNavOpenLocal = true;
  const right_caret = document.getElementById("right_caret");
  const hamburger_menu = document.getElementById("hamburger_menu");
  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
  // Create a copy of the nano store so we can make this a toggle

  // Set the store to true when the button is clicked
  function openDialog() {
    if (isMobileNavOpenLocal == false) {
      isMobileNavOpen.set(true);
      if (hamburger_menu && right_caret) {
        hamburger_menu.style.display = "none";
        right_caret.style.display = "block";
      }
    } else {
      isMobileNavOpen.set(false);
      if (hamburger_menu && right_caret) {
        hamburger_menu.style.display = "block";
        right_caret.style.display = "none";
      }
    }
  }

  isMobileNavOpen.subscribe((open) => {
    if (open) {
      isMobileNavOpenLocal = true;
      if (hamburger_menu && right_caret) {
        hamburger_menu.style.display = "none";
        right_caret.style.display = "block";
      }
    } else {
      isMobileNavOpenLocal = false;
      if (hamburger_menu && right_caret) {
        hamburger_menu.style.display = "block";
        right_caret.style.display = "none";
      }
    }
  });

  // Add an event listener to the button

  if (mobileNavTrigger) {
    mobileNavTrigger.addEventListener("click", openDialog);
  }
</script>