frontend: Use transition to expand Toolbar

Also, whilst here, shorten the prop definition.

1 files changed, 4 insertions, 2 deletions

diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte
index 9e961ed..fefc151 100644
--- a/frontend/src/lib/toolbar/Toolbar.svelte
+++ b/frontend/src/lib/toolbar/Toolbar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { slideYDefault } from '$lib/Transitions';
 	import { type Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
 
 	export interface ToolbarState {
 		expanded: boolean;
@@ -14,7 +16,7 @@
 		expand?: boolean;
 	}
 
-	let { start, center, end, expansion, expand: expand = false }: Props = $props();
+	let { start, center, end, expansion, expand = false }: Props = $props();
 
 	let expanded = $state(expand);
 
@@ -38,7 +40,7 @@
 		</div>
 	</div>
 	{#if expanded}
-		<div class="mt-4">
+		<div class="mt-4" transition:slide={slideYDefault}>
 			{@render expansion?.()}
 		</div>
 	{/if}