Route transitions

Levminer · Aug 19, 2022 · 93ac8a6 · 93ac8a6
1 parent 87f3db0
commit 93ac8a6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/interface/components/navigation.svelte b/interface/components/navigation.svelte
@@ -41,8 +41,6 @@
 			</svg>
 			Settings
 		</a>
-
-		<a href="/" class="menuButton mx-3 mt-0"> Landing </a>
 	</div>
 </div>
 

diff --git a/interface/components/routeTransition.svelte b/interface/components/routeTransition.svelte
@@ -0,0 +1,10 @@
+{#key $router.path}
+	<div in:fade={{ duration: 200 }}>
+		<slot />
+	</div>
+{/key}
+
+<script>
+	import { router } from "tinro"
+	import { fade, fly } from "svelte/transition"
+</script>
diff --git a/interface/layout/app.svelte b/interface/layout/app.svelte
@@ -1,7 +1,3 @@
-<svelte:head>
-	<title>hi</title>
-</svelte:head>
-
 <div class="flex h-screen">
 	{#if $state.authenticated}
 		<Navigation />
@@ -11,14 +7,16 @@
 		<BuildNumber />
 		<div class="top" />
 
-		<Route path="/"><Landing /></Route>
-		<Route path="/confirm"><Confirm /></Route>
+		<RouteTransition>
+			<Route path="/"><Landing /></Route>
+			<Route path="/confirm"><Confirm /></Route>
 
-		<Route path="/codes"><Codes /></Route>
-		<Route path="/import"><Import /></Route>
-		<Route path="/export"><Export /></Route>
-		<Route path="/edit"><Edit /></Route>
-		<Route path="/settings"><Settings /></Route>
+			<Route path="/codes"><Codes /></Route>
+			<Route path="/import"><Import /></Route>
+			<Route path="/export"><Export /></Route>
+			<Route path="/edit"><Edit /></Route>
+			<Route path="/settings"><Settings /></Route>
+		</RouteTransition>
 	</div>
 </div>
 
@@ -29,6 +27,7 @@
 
 	// import UpdateAlert from "../components/updateAlert.svelte"
 	import BuildNumber from "../components/buildNumber.svelte"
+	import RouteTransition from "../components/routeTransition.svelte"
 
 	import Landing from "../windows/landing/landing.svelte"
 	import Codes from "../windows/codes/codes.svelte"