Spaces:
Paused
Paused
File size: 2,397 Bytes
46c7a16 | 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 | ---
import { Icon } from 'astro-icon/components';
const { options, page } = Astro.props;
import { GAMES_LINK } from 'astro:env/client';
---
<div class="block md:hidden">
<button aria-label="toggle navigation" onclick="loadMobileNav()" class="ml-[20px] mr-0 text-[14px] cursor-pointer text-[--accent]">
<Icon name="fa-solid:sliders-h" />
</button>
</div>
<div id="mobileNav" class="hidden transition-all duration-200 absolute top-0 right-0 left-0 w-full h-full bg-[--background] flex flex-col">
<Icon aria-label="close navigation" onclick="closeMobileNav()" class="cursor-pointer text-[--accent] absolute right-[15px] top-[15px] w-[40px] h-[40px] text-[30px]" name="fa6-solid:xmark" />
<div class="flex flex-col w-full h-full justify-center items-center">
{!options ? (
<a class="w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background]" href="/community">Community</a>
<a class="w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background]" href="/support">Support</a>
<a class="w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background]" href="/apps">Apps</a>
<>
{GAMES_LINK && (<a class="w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background]" href="/gs">Games</a>)}
</>
<a class="w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background]" href="/options">Options</a>
) : (
<a class=`w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background] ${page === "about" && 'text-[--accent]'}` href="/options/about">About</a>
<a class=`w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background] ${page === "bt" && "text-[--accent]"}` href="/options/bt">Browser Tab</a>
<a class=`w-full text-center text-[17px] py-[35px] hover:brightness-75 bg-[--background] ${page === "general" && "text-[--accent]"}` href="/options">General</a>
)}
</div>
</div>
<script>
window.loadMobileNav = function() {
const nav = document.getElementById("mobileNav") as HTMLElement;
nav.classList.remove("hidden")
}
window.closeMobileNav = function() {
const nav = document.getElementById("mobileNav") as HTMLElement;
nav.classList.add("hidden");
}
</script>
|