Migrates to svelte 5

web/src/lib/components/nav_bar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { afterNavigate, goto } from "$app/navigation";
-    import { page } from "$app/stores";
     import LogoText from "$lib/components/logo/logo_text.svelte";
     import { pb } from "$lib/pocketbase";
     import { theme, toggleTheme } from "$lib/stores/theme_store";
@@ -8,12 +7,13 @@
     import { getFileURL } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
     import { backInOut, cubicOut } from "svelte/easing";
-    import { tweened } from "svelte/motion";
     import Drawer from "./base/drawer.svelte";
     import Dropdown from "./base/dropdown.svelte";
     import LogoTextLight from "./logo/logo_text_light.svelte";
     import NotificationDropdown from "./notification/notification_dropdown.svelte";
     import { browser } from "$app/environment";
+    import { page } from "$app/state";
+    import { Tween } from "svelte/motion";
 
     let navBarItems = [
         { text: "Home", value: "/" },
@@ -27,22 +27,22 @@
         { text: $_("logout"), value: "logout", icon: "right-from-bracket" },
     ];
 
-    const indicatorPosition = tweened(0, {
+    const indicatorPosition = new Tween(0, {
         duration: 300,
         easing: cubicOut,
     });
 
-    const indicatorWidth = tweened(0, {
+    const indicatorWidth = new Tween(0, {
         duration: 300,
         easing: cubicOut,
     });
 
-    const indicatorScale = tweened(0, {
+    const indicatorScale = new Tween(0, {
         duration: 600,
         easing: backInOut,
     });
 
-    let drawerOpen: boolean = false;
+    let drawerOpen: boolean = $state(false);
 
     afterNavigate((e) => {
         const routeId = e.to?.route.id;
@@ -91,19 +91,21 @@
         }
     }
 
-    $: user = browser ? $currentUser : pb.authStore.model;
+    let user = $derived(browser ? $currentUser : pb.authStore.model);
 </script>
 
 <Drawer bind:open={drawerOpen}>
     <div class="flex gap-4 items-center m-4">
         <div class="basis-full"></div>
         <button
+            aria-label="Toggle theme"
             class="btn-icon fa-regular fa-{$theme === 'light' ? 'sun' : 'moon'}"
-            on:click={() => toggleTheme()}
+            onclick={() => toggleTheme()}
         ></button>
         <button
+            aria-label="Toggle drawer"
             class="btn-icon block fa fa-close float-right"
-            on:click={() => (drawerOpen = false)}
+            onclick={() => (drawerOpen = false)}
         ></button>
     </div>
     <div class="flex flex-col px-12 gap-8">
@@ -140,7 +142,8 @@
                     </p>
                 </a>
                 <button
-                    on:click={() => {
+                    aria-label="Logout"
+                    onclick={() => {
                         logout();
                         window.location.href = "/";
                     }}
@@ -168,7 +171,7 @@
     <menu id="nav-bar-links" class="hidden lg:flex gap-8 relative py-1 px-2">
         <div
             class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
-            style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
+            style="width: {indicatorWidth.current}px; left: {indicatorPosition.current}px; scale: {indicatorScale.current}"
         ></div>
         {#each navBarItems as item}
             <a class="font-semibold z-10" href={item.value}>{item.text}</a>
@@ -182,50 +185,55 @@
     {#if user}
         <div class="hidden lg:flex gap-6 items-center">
             <button
+                aria-label="Toggle theme"
                 class="btn-icon fa-regular fa-{$theme === 'light'
                     ? 'sun'
                     : 'moon'}"
-                on:click={() => toggleTheme()}
+                onclick={() => toggleTheme()}
             ></button>
             <a class="btn-primary btn-large" href="/trail/edit/new"
                 ><i class="fa fa-plus mr-2"></i>{$_("new-trail")}</a
             >
-            {#if $page.data.notifications}
+            {#if page.data.notifications}
                 <NotificationDropdown></NotificationDropdown>
             {/if}
             <Dropdown
                 items={dropdownItems}
-                on:change={(e) => handleDropdownClick(e.detail)}
-                let:toggleMenu={openDropdown}
+                onchange={(item) => handleDropdownClick(item)}
+                
             >
-                <div class="flex items-center">
-                    <button
-                        class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-10 aspect-square"
-                        on:click={openDropdown}
-                    >
-                        <img
-                            class="rounded-full w-full h-full"
-                            src={getFileURL(user, user.avatar) ||
-                                `https://api.dicebear.com/7.x/initials/svg?seed=${user.username}&backgroundType=gradientLinear`}
-                            alt="avatar"
-                        />
-                    </button>
-                </div>
-            </Dropdown>
+                {#snippet children({ toggleMenu: openDropdown })}
+                                <div class="flex items-center">
+                        <button
+                            class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-10 aspect-square"
+                            onclick={openDropdown}
+                        >
+                            <img
+                                class="rounded-full w-full h-full"
+                                src={getFileURL(user, user.avatar) ||
+                                    `https://api.dicebear.com/7.x/initials/svg?seed=${user.username}&backgroundType=gradientLinear`}
+                                alt="avatar"
+                            />
+                        </button>
+                    </div>
+                                            {/snippet}
+                        </Dropdown>
         </div>
     {:else}
         <div class="hidden md:flex items-center gap-8">
             <button
+                aria-label="Toggle theme"
                 class="btn-icon fa-regular fa-{$theme === 'light'
                     ? 'sun'
                     : 'moon'}"
-                on:click={() => toggleTheme()}
+                onclick={() => toggleTheme()}
             ></button>
             <a class="btn-primary btn-large" href="/login">{$_("login")}</a>
         </div>
     {/if}
     <button
+        aria-label="Toggle drawer"
         class="btn-icon fa fa-bars lg:hidden"
-        on:click={() => (drawerOpen = !drawerOpen)}
+        onclick={() => (drawerOpen = !drawerOpen)}
     ></button>
 </nav>