Navigation und Content-Pages so angepasst, dass über einen Language-Chooser die Sprache der Seite gewechselt werden kann und automatisch auch der reload der Content-Page angestoßen wird.

src/api.ts

@@ -234,7 +234,7 @@ export const getNavigations = async (l: Locale): Promise<Navigation[]> => {
             method: "get",
             offset: 0,
             filter: {
-                locale: l.key,
+                // locale: l.key,
             },
         })
         return response.data

src/components/App.svelte

@@ -59,16 +59,14 @@
 
 <Header />
 
-<div>
+<Router url="{url}">
-    <Router url="{url}">
+    <Route path="/" let:params>
-        <Route path="/" let:params>
+        <Home />
-            <Home />
+    </Route>
-        </Route>
+    <Route path="/*path" let:params>
-        <Route path="/*path" let:params>
+        <Content path="/{params.path}" />
-            <Content path="/{params.path}" />
+    </Route>
-        </Route>
+</Router>
-    </Router>
-</div>
 
 <Footer />
 

src/components/routes/Content.svelte

@@ -2,12 +2,15 @@
     import { getContent } from "../../api"
     import { generalInfo, currentLang } from "../../store"
 
+    import Image from "../widgets/Image.svelte"
+
     export let path: string
 
     let loading = true
     let content: Content
+    let currentDomain = window.location.protocol + "//" + window.location.host
 
-    function load() {
+    const load = () => {
         loading = true
         getContent(path, $currentLang)
             .then((c) => {
@@ -18,6 +21,10 @@
             })
     }
 
+    currentLang.subscribe(() => {
+        load()
+    })
+
     $: if (path) load()
 </script>
 
@@ -34,6 +41,31 @@
                 {#each content.blocks || [] as b}
                     {JSON.stringify(b)}
                 {/each}
+            {:else}
+                <div class="page-404">
+                    <div>
+                        <Image
+                            file="{$generalInfo?.media?.brand}"
+                            alt="{$generalInfo?.meta?.metaTitle}"
+                            cssClass="brand"
+                        />
+                    </div>
+
+                    <h1>Seite nicht gefunden!</h1>
+
+                    <p class="mb-md">
+                        <strong>{path}</strong>
+                    </p>
+                    <p>
+                        Die gesuchte Seite existiert nicht oder es ist ein anderer Fehler aufgetreten.<br />
+                        Gehen Sie zurück oder gehen Sie zu <a href="/"><strong>{currentDomain}</strong></a>, um eine
+                        neue Richtung zu wählen.
+                    </p>
+                    <p>
+                        The page you are looking for doesn't exist or an other error occurred.<br />
+                        Go back, or head over to <a href="/"><strong>{currentDomain}</strong></a> to choose a new direction.
+                    </p>
+                </div>
             {/if}
         </div>
     </div>

src/components/widgets/LanguageChooser.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing"
     import { navigations, location, currentLang } from "../../store"
 
     $: languages = []
@@ -12,19 +13,21 @@
         languages = languages
     }
 
-    $: console.log($location)
+    const setLanguage = (lang: string) => {
+        let path = $location.path.split("/")
+        path[1] = lang
+
+        $location.path = path.join("/")
+        $currentLang = lang
+
+        navigate($location.path + $location.search, { replace: true })
+    }
 </script>
 
 <div class="language-chooser">
-    {#each languages as language}
+    {#each languages as lang}
-        <div
+        <div class="lang" class:active="{$currentLang === lang}" on:click="{() => setLanguage(lang)}">
-            class="lang"
+            {lang}
-            class:active="{$currentLang === language}"
-            on:click="{() => {
-                $currentLang = language
-            }}"
-        >
-            {language}
         </div>
     {/each}
 </div>

src/components/widgets/Navigation.svelte

@@ -4,7 +4,7 @@
     import { mdiMenu } from "@mdi/js"
 
     import { links } from "svelte-routing"
-    import { navigations } from "../../store"
+    import { navigations, currentLang } from "../../store"
 
     import LanguageChooser from "./LanguageChooser.svelte"
 
@@ -14,8 +14,9 @@
     let showMobileNav: boolean = false
 
     $: {
+        navigation = null
         $navigations?.map((nav) => {
-            if (nav.ident === ident) {
+            if (nav.ident === ident && nav.locale === $currentLang) {
                 navigation = nav
             }
         })

src/css/theme-2022/components/general.less

@@ -63,3 +63,15 @@ body {
         right: -53px;
     }
 }
+
+// 404
+
+.page-404 {
+    text-align: center;
+    margin-bottom: @space-xl;
+
+    .brand {
+        width: 400px;
+        margin: auto auto @space-xl auto;
+    }
+}

src/css/theme-2022/components/language-chooser.less

@@ -2,20 +2,22 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid #ccc;
+    border: 1px solid @secondary;
+    margin: @space-xs;
 
     .lang {
-        border: 1px solid #ccc;
+        border: 1px solid @secondary;
+        padding: 0 @space-xs;
         cursor: pointer;
 
         &:hover {
-            background: #ccc;
+            background: @primary;
-            color: black;
+            color: @on-primary;
         }
 
         &.active {
-            background: #ccc;
+            background: @primary;
-            color: black;
+            color: @on-primary;
             font-weight: 700;
         }
     }