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
|
<script>
import { theme } from "$lib/store";
import DarkToggle from "$comp/DarkToggle.svelte";
import OutClick from "svelte-outclick";
let { t, user, w, opacity } = $props();
let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
let showMenu = $state(false);
let menuButtons = [
{ key: "nav.settings", icon: "ph:gear-bold", href: `/settings` },
{ key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` },
{ key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` },
{
key: "nav.merch",
icon: "ph:storefront-bold",
href: `https://coinosmerch.com`,
},
{ key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
{ key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
];
let hideMenu = () => (showMenu = false);
let toggleMenu = () => (showMenu = !showMenu);
</script>
<div>
<OutClick on:outclick={hideMenu}>
<button class="btn-menu {opacity('/support')}" onclick={toggleMenu}
><iconify-icon noobserver icon="ph:list-bold" width={w > 640 ? 32 : 24}
></iconify-icon>
</button>
<div
class="absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
class:hidden={!showMenu}
class:block={showMenu}
>
<ul class="space-y-5 w-48">
{#each menuButtons as { href, icon, key }}
<li>
{#if key.includes("dark")}
<DarkToggle />
{:else}
<a
{href}
data-sveltekit-preload-code="eager"
data-sveltekit-preload-data="false"
onclick={hideMenu}
>
<button
class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
>
<iconify-icon noobserver {icon} width="32"></iconify-icon>
{t(key)}
</button>
</a>
{/if}
</li>
{/each}
</ul>
<hr class="my-4" />
<a href="/?stay=true"
><iconify-icon noobserver icon="coinos:logo" width="160"></iconify-icon></a
>
</div>
</OutClick>
</div>
<style>
.btn-menu {
@apply flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl;
}
</style>
|
