revamp weather UI: cards, meteograms, units in header, location favorites and range controls

src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+
 	import { page } from '$app/stores';
 
 	import { storedTheme } from '$lib/stores/settings';
@@ -63,10 +65,14 @@
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="absolute inset-0 bg-black/30"
+				transition:fade={{ duration: 150 }}
 				onclick={closeMobileMenu}
 				onkeydown={closeMobileMenu}
 			></div>
-			<div class="relative z-1 h-full w-55 shadow-lg">
+			<div
+				class="relative z-1 h-full w-55 shadow-lg"
+				transition:fly={{ x: -220, duration: 200, opacity: 1 }}
+			>
 				<WeatherNav collapsed={false} onMobileClose={closeMobileMenu} />
 			</div>
 		</div>