diff --git a/src/components/AccountButton.svelte b/src/components/AccountButton.svelte index 1bcb9c8..8b7978e 100644 --- a/src/components/AccountButton.svelte +++ b/src/components/AccountButton.svelte @@ -6,6 +6,41 @@ import type { PageData } from "../routes/$types"; import cookie from "cookiejs"; + interface AnchorItem { + type: "anchor"; + name: string; + href: string; + } + + interface ButtonItem { + type: "button"; + name: string; + action: () => void; + } + + interface DividerItem { + type: "divider"; + } + + type NavItem = AnchorItem | ButtonItem | DividerItem; + + export let navItems: NavItem[] = [ + { type: "anchor", name: "Multiplayer", href: "/account" }, + { + type: "anchor", + name: "Profile", + href: "https://gravatar.com/profile", + }, + { + type: "divider", + }, + { + type: "button", + name: "Sign out", + action: signOut, + }, + ]; + export let user: PageData["user"]; const token = getContext>("token"); @@ -24,7 +59,10 @@ open = !open; } + let jsEnabled = false; + onMount(() => { + jsEnabled = true; function closeMenu(e: MouseEvent) { if (e.target instanceof HTMLElement) { if (!e.target.closest(".user-profile-menu")) { @@ -48,22 +86,47 @@ style="transition: 360ms {transition}" class={`${open ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0"} absolute right-0 top-full mt-2 flex h-fit origin-top-right transform-gpu flex-col overflow-hidden rounded-[20px] rounded-tr-none border-2 border-solid border-[#ffffff34] bg-[#110d10] p-[2px] opacity-0 shadow-lg shadow-[rgba(0,0,0,0.25)] motion-reduce:transition-none [&>.nav-btn:first-child]:rounded-tl-[16px] [&>.nav-btn:first-child]:rounded-tr-none [&>.nav-btn:last-child]:rounded-bl-[16px] [&>.nav-btn:last-child]:rounded-br-[16px]`} > - -