beter taal wissel knopje

tdamsma · Jun 8, 2024 · 5ee730d · 5ee730d
1 parent 742386b
commit 5ee730d
Showing 1 changed file with 27 additions and 3 deletions.
diff --git a/src/lib/components/LanguageSwitcher.svelte b/src/lib/components/LanguageSwitcher.svelte
@@ -6,6 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { get } from 'svelte/store';
+	import { scale } from 'svelte/transition';
 
 	function switchToLanguage(newLanguage: AvailableLanguageTag) {
 		const canonicalPath = i18n.route(get(page).url.pathname);
@@ -17,9 +18,9 @@
 		nl: '🇳🇱',
 		en: '🇬🇧'
 	} as Record<AvailableLanguageTag, string>;
+
 	const currentLanguage = languageTag();
 	const newLanguage = currentLanguage === 'nl' ? 'en' : 'nl';
-	const buttonLabel = labels[newLanguage];
 </script>
 
 <div class="language-switcher">
@@ -28,7 +29,14 @@
 		on:click={() => switchToLanguage(newLanguage)}
 		title="Switch language to {newLanguage.toUpperCase()}"
 	>
-		{buttonLabel}
+		<span
+			transition:scale={{ duration: 250 }}
+			class={`language-flag ${currentLanguage === 'nl' ? 'selected' : ''}`}>{labels.nl}</span
+		>
+		<span
+			transition:scale={{ duration: 250 }}
+			class={`language-flag ${currentLanguage === 'en' ? 'selected' : ''}`}>{labels.en}</span
+		>
 	</button>
 </div>
 
@@ -39,9 +47,25 @@
 	}
 
 	.language-button {
-		font-size: 2rem;
+		font-size: 1.2rem;
 		background: none;
 		border: none;
 		cursor: pointer;
+		display: flex;
+		align-items: center;
+	}
+
+	.language-flag {
+		padding: 0.2rem 0.5rem;
+		transition: color 0.3s ease;
+	}
+
+	.language-flag.selected {
+		transform: scale(1.4);
+		color: #007bff; /* Bootstrap primary color */
+	}
+
+	.separator {
+		margin: 0 0.5rem;
 	}
 </style>