diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index bed8d55..ce8ebb1 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -6,6 +6,7 @@
import { onMount } from 'svelte';
import { page } from '$app/state';
import { language } from '$lib/stores/language'; // Import the global language store
+ import { browser } from '$app/environment';
let hinagiku = $state('Hinagiku');
let highlight = $state(0);
@@ -27,6 +28,16 @@
}
};
+ import { derived } from 'svelte/store';
+
+ const flagSrc = derived(language, ($language) => {
+ return browser
+ ? $language === 'zh'
+ ? '/icons/flag-zh.jpg'
+ : '/icons/flag-us.png'
+ : '/icons/flag-us.png';
+ });
+
onMount(() => {
const interval = setInterval(() => {
let newHighlight;
@@ -77,12 +88,7 @@
{/if}
-
+
setLanguage('en')}>
diff --git a/src/lib/stores/language.ts b/src/lib/stores/language.ts
index 42c6d2b..dc8b930 100644
--- a/src/lib/stores/language.ts
+++ b/src/lib/stores/language.ts
@@ -1,3 +1,20 @@
+import { browser } from '$app/environment';
import { writable } from 'svelte/store';
-export const language = writable<'en' | 'zh'>('en');
+function getSavedLanguage() {
+ if (browser) {
+ const saved = localStorage.getItem('language');
+ if (saved === 'en' || saved === 'zh') {
+ return saved;
+ }
+ }
+ return 'en';
+}
+
+export const language = writable<'en' | 'zh'>(getSavedLanguage());
+
+if (browser) {
+ language.subscribe((value) => {
+ localStorage.setItem('language', value);
+ });
+}