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')}> English 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); + }); +}