svelte 5

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}