apps/kit/src/routes/(main)/+layout.svelte


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

<script lang="ts">
    import "../../app.pcss";
    import { setLocale } from "$lib/i18n/i18n-svelte";
    import LocaleSwitcher from "$lib/components/locale-switcher.svelte";
    import { ExclamationTriangleIcon } from "$lib/components/icons";
    import type { LayoutData } from "./$types";

    let online = true;
    export let data: LayoutData;
    // at the very top, set the locale before you access the store and before the actual rendering takes place
    setLocale(data.locale);
</script>

<svelte:window bind:online />

{#if !online}
    <div class="bg-yellow-50 relative z-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <ExclamationTriangleIcon class="bg-yellow-400" />
            </div>
            <div class="ml-3">
                <p class="text-sm text-yellow-700">You seem to be offline, please check your internet connection.</p>
            </div>
        </div>
    </div>
{/if}

<LocaleSwitcher />
<slot />