menu refactor

1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
new file mode 100644
index 00000000..c7f28e19
--- /dev/null
+++ b/src/components/Menu.svelte
@@ -0,0 +1,84 @@
+<script>
+  import { theme } from "$lib/store";
+  import OutClick from "svelte-outclick";
+  export let showMenu, t, user, w, opacity;
+
+  let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
+
+  let menuButtons;
+  $: if (user)
+    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` },
+    ];
+</script>
+
+<div>
+  <OutClick on:outclick={() => (showMenu = false)}>
+    <button
+      class="btn-menu {opacity('/support')}"
+      on:click={() => {
+        console.log("YEAH");
+        showMenu = !showMenu;
+        console.log(showMenu);
+      }}
+      ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24} />
+    </button>
+
+    <div
+      class="{showMenu
+        ? 'block'
+        : 'hidden'} absolute top-14 right-0 bg-base-100 rounded-3xl p-8 shadow-xl z-50"
+    >
+      <ul class="space-y-5 w-48">
+        {#each menuButtons as { href, icon, key }}
+          <li>
+            {#if key.includes("dark")}
+              <button
+                class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
+                on:click={dark}
+              >
+                <iconify-icon
+                  icon={$theme === "dark"
+                    ? "ph:sun-bold"
+                    : "ph:moon-stars-bold"}
+                  width="32"
+                />
+                {t(`nav.${$theme === "dark" ? "light" : "dark"}`)}
+              </button>
+            {:else}
+              <a
+                {href}
+                data-sveltekit-preload-code="eager"
+                data-sveltekit-preload-data="false"
+              >
+                <button
+                  class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
+                >
+                  <iconify-icon {icon} width="32" />
+                  {t(key)}
+                </button>
+              </a>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      <hr class="my-4" />
+      <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="130" /></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>