diff options
Diffstat (limited to 'src/components/AppHeader.svelte')
| -rw-r--r-- | src/components/AppHeader.svelte | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 5a922792..fef2f0f4 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,4 +1,6 @@ <script> + import { run } from 'svelte/legacy'; + import { banner, theme, newPayment } from "$lib/store"; import { goto } from "$app/navigation"; import Avatar from "$comp/Avatar.svelte"; @@ -6,19 +8,21 @@ import { loading, t } from "$lib/translations"; import { page } from "$app/stores"; - export let user, subject; + let { user, subject = $bindable() } = $props(); - let w; - $: if (!subject) subject = user; + let w = $state(); + run(() => { + if (!subject) subject = user; + }); - $: bg = - $banner?.id && $banner.id === subject.id + let bg = + $derived($banner?.id && $banner.id === subject.id ? `url(${$banner.src})` : subject?.banner ? subject.banner.includes(":") ? `url(${subject.banner})` : `url(/api/public/${subject.banner}.webp)` - : undefined; + : undefined); const links = [ { @@ -40,10 +44,10 @@ }, ]; - $: opacity = (href) => + let opacity = $derived((href) => $page.url.pathname === href ? "opacity-100" - : "opacity-90 hover:opacity-none"; + : "opacity-90 hover:opacity-none"); </script> <svelte:window bind:innerWidth={w} /> @@ -58,7 +62,7 @@ {#each links as { href, icon, flip }} <a {href} data-sveltekit-preload-code="eager"> <button class="btn-menu {opacity(href)}"> - <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip} /> + <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}></iconify-icon> </button> </a> {/each} |