feat: Add inital translation support

1 files changed, 20 insertions, 12 deletions

diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte
index 3d632ae..fb34593 100644
--- a/apps/projects/src/app/pages/_layout.svelte
+++ b/apps/projects/src/app/pages/_layout.svelte
@@ -2,18 +2,27 @@
 	import {onMount} from "svelte";
 	import {location, link} from "svelte-spa-router";
 	import {logout_user} from "$app/lib/services/user-service";
-	import {random_string, switch_theme} from "$shared/lib/helpers";
+	import {random_string} from "$shared/lib/helpers";
 	import {get_session_data} from "$shared/lib/session";
 	import ProfileModal from "$app/pages/views/profile-modal.svelte";
 	import {Menu, MenuItem, MenuItemSeparator} from "$shared/components/menu";
 	import Button from "$shared/components/button.svelte";
 	import {IconNames} from "$shared/lib/configuration";
+	import LL from "$app/lib/i18n/i18n-svelte";
+	import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte";
+	import {currentLocale} from "$app/lib/stores/locale";
 
 	let ProfileModalFunctions = {};
 	let showUserMenu = false;
 	let userMenuTriggerNode;
 	const userMenuId = "__menu_" + random_string(3);
-	const username = get_session_data().profile.username;
+	const username = get_session_data()?.profile.username;
+
+	function toolbelt_change(event) {
+		if (event.detail.name === "locale") {
+			currentLocale.set(event.detail.value);
+		}
+	}
 
 	onMount(() => {
 		userMenuTriggerNode = document.getElementById("open-user-menu");
@@ -21,6 +30,7 @@
 </script>
 
 <ProfileModal bind:functions={ProfileModalFunctions}/>
+<BlowoutToolbelt on:change={toolbelt_change}/>
 
 <nav class="container max-width-xl@md width-fit-content@md width-100% max-width-none margin-y-xs@md margin-bottom-xs block@md position-relative@md position-absolute bottom-unset@md bottom-0">
     <div class="tabs-nav-v2 justify-between">
@@ -28,17 +38,17 @@
             <div class="tab-v2">
                 <a href="/home"
                    use:link
-                   class="tabs-nav-v2__item {($location === '/' || $location.startsWith('/home')) ? 'tabs-nav-v2__item--selected' : ''}">Home</a>
+                   class="tabs-nav-v2__item {($location === '/' || $location.startsWith('/home')) ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.home()}</a>
             </div>
             <div class="tab-v2">
                 <a href="/data"
                    use:link
-                   class="tabs-nav-v2__item {$location.startsWith('/data') ? 'tabs-nav-v2__item--selected' : ''}">Data</a>
+                   class="tabs-nav-v2__item {$location.startsWith('/data') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.data()}</a>
             </div>
             <div class="tab-v2">
                 <a href="/settings"
                    use:link
-                   class="tabs-nav-v2__item {$location.startsWith('/settings') ? 'tabs-nav-v2__item--selected' : ''}">Settings</a>
+                   class="tabs-nav-v2__item {$location.startsWith('/settings') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.settings()}</a>
             </div>
         </div>
         <div class="tab-v2 padding-x-sm">
@@ -51,7 +61,7 @@
                     icon_width="2rem"
                     icon_height="2rem"
                     icon_right_aligned="true"
-                    title="Toggle user menu"
+                    title="{$LL.nav.usermenu.toggleTitle()}"
                     aria-controls="{userMenuId}"
             />
             <Menu bind:show="{showUserMenu}"
@@ -59,14 +69,12 @@
                   id="{userMenuId}">
                 <div slot="options">
                     <MenuItem on:click={() => ProfileModalFunctions.open()}>
-                        <span title="Administrate your profile">Profile</span>
-                    </MenuItem>
-                    <MenuItem on:click={() => switch_theme()}>
-                        <span title="Change between a dark and light theme">Switch theme</span>
+                        <span title="{$LL.nav.usermenu.profileTitle()}">{$LL.nav.usermenu.profile()}</span>
                     </MenuItem>
                     <MenuItemSeparator/>
-                    <MenuItem danger="true" on:click={() => logout_user()}>
-                        <span title="Log out of your profile">Log out</span>
+                    <MenuItem danger="true"
+                              on:click={() => logout_user()}>
+                        <span title="{$LL.nav.usermenu.logoutTitle()}">{$LL.nav.usermenu.logout()}</span>
                     </MenuItem>
                 </div>
             </Menu>