webui/src/routes/+layout.svelte

<script lang="ts">
	import {
		Navbar,
		NavbarBrand,
		Nav,
		NavItem,
		NavLink,
		Collapse,
		Dropdown,
		DropdownMenu,
		DropdownItem,
		DropdownToggle
	} from 'sveltestrap';

	import { locale, locales, waitLocale } from 'svelte-i18n';
	import type { LayoutLoad } from './$types';
	import { browser } from '$app/environment';
	import { page } from '$app/stores';

    export const setLocale = (lang: string) => () => {
        locale.set(lang);
        localStorage.setItem("locale", lang)
    }
</script>

<Navbar expand="md">
	<NavbarBrand>&#8383;TClock</NavbarBrand>
	<Collapse navbar expand="md">
		<Nav class="me-auto" navbar>
			<NavItem>
				<NavLink href="/" active="{$page.url.pathname === ("/")}">Home</NavLink>
			</NavItem>
			<NavItem>
				<NavLink href="/api" active="{$page.url.pathname === ("/api")}">API</NavLink>
			</NavItem>
		</Nav>
		<Dropdown inNavbar>
			<DropdownToggle nav caret>{$locale}</DropdownToggle>
			<DropdownMenu end>
				{#each $locales as locale}
					<DropdownItem on:click={setLocale(locale)}>{locale}</DropdownItem>
				{/each}
			</DropdownMenu>
		</Dropdown>
	</Collapse>
</Navbar>

<!-- +layout.svelte -->
<slot />