Test view transition api

frontend/src/lib/components/Route.svelte

@@ -6,7 +6,7 @@
 	<div id="image" style="background-image: url(/images/test-1.jpg" />
 	<div id='path-holder'>
 		<div style='font-size: 20px;'>Percorso</div>
-		<p>{route.title_it}</p>
+		<p class='path-name'>{route.title_it}</p>
 	</div>
 	<div id='duration-holder'>
 		<div style='font-size: 15px;'>Dislivello</div>
@@ -61,4 +61,8 @@
 		font-weight: bold;
 		font-size: 22px;
 	}
+
+	.path-name {
+		view-transition-name: title;
+	}
 </style>

frontend/src/routes/paths/[slug]/+page.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
 	import Route from '$lib/components/Route.svelte';
 	import HomeHeader from '$lib/components/HomeHeader.svelte';
+	import { onNavigate } from '$app/navigation';
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 
 	export let data;
 </script>
@@ -8,9 +20,9 @@
 <HomeHeader title={data.category}></HomeHeader>
 
 <div>
-{#each data.routes as route}
+	{#each [data.routes[0]] as route}
 		<Route {route}></Route>
-{/each}
+	{/each}
 </div>
 
 <style>

frontend/src/routes/routes/[slug]/+page.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
 	import Header from '$lib/components/Header.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
+	import { onNavigate } from '$app/navigation';
 
 	export let data: App.Route;
 
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
+
+
 	let divider;
 
     const mapClick = () => {};
@@ -16,7 +29,7 @@
 
 <div bind:this={divider} id="divider">
 	<div id="banner">
-		<p>Percorso <b>{data.name_it}</b></p>
+		<p class='path-name'>Percorso <b>{data.name_it}</b></p>
 		<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
 	</div>
 	<Tabs on:map-click={mapClick} route={data}></Tabs>
@@ -57,4 +70,8 @@
 		font-size: 14px;
 		text-align: rightìì;
 	}
+
+	.path-name {
+		view-transition-name: title;
+	}
 </style>