aboutsummaryrefslogtreecommitdiffstats
path: root/apps/kit/src/lib/components/locale-switcher.svelte
blob: 1f9eb3763bb8dfeced8872e9c840763c21031060 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script lang="ts">
    import { browser } from "$app/environment";
    import { page } from "$app/stores";
    import { setLocale, locale } from "$lib/i18n/i18n-svelte";
    import type { Locales } from "$lib/i18n/i18n-types";
    import { locales } from "$lib/i18n/i18n-util";
    import { loadLocaleAsync } from "$lib/i18n/i18n-util.async";

    const switchLocale = async (newLocale: Locales) => {
        if (!newLocale || $locale === newLocale) return;
        await loadLocaleAsync(newLocale);
        setLocale(newLocale);
        document.querySelector("html")?.setAttribute("lang", newLocale);
    };

    $: if (browser) {
        switchLocale($page.params.lang as Locales);
    }
</script>

<ul>
    {#each locales as aLocale}
        <li>
            <button
                type="button"
                class:active={aLocale === $locale}
                on:click={() => switchLocale(aLocale)}
            >
                {aLocale}
            </button>
        </li>
    {/each}
</ul>