File size: 4,109 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
---
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>
|