From 9188148fe7af97fe41176ef3ccfb5ae26b6b0538 Mon Sep 17 00:00:00 2001
From: Mario Linz <mario@webmakers.de>
Date: Wed, 25 May 2022 15:37:15 +0200
Subject: [PATCH] =?UTF-8?q?Navigation=20und=20Content-Pages=20so=20angepas?=
 =?UTF-8?q?st,=20dass=20=C3=BCber=20einen=20Language-Chooser=20die=20Sprac?=
 =?UTF-8?q?he=20der=20Seite=20gewechselt=20werden=20kann=20und=20automatis?=
 =?UTF-8?q?ch=20auch=20der=20reload=20der=20Content-Page=20angesto=C3=9Fen?=
 =?UTF-8?q?=20wird.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.ts                                    |  2 +-
 src/components/App.svelte                     | 18 +++++-----
 src/components/routes/Content.svelte          | 34 ++++++++++++++++++-
 src/components/widgets/LanguageChooser.svelte | 23 +++++++------
 src/components/widgets/Navigation.svelte      |  5 +--
 src/css/theme-2022/components/general.less    | 12 +++++++
 .../components/language-chooser.less          | 14 ++++----
 7 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index be4263a..7ebc6ac 100644
--- a/src/api.ts
+++ b/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
diff --git a/src/components/App.svelte b/src/components/App.svelte
index aa22c84..ee50449 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -59,16 +59,14 @@
 
 <Header />
 
-<div>
-    <Router url="{url}">
-        <Route path="/" let:params>
-            <Home />
-        </Route>
-        <Route path="/*path" let:params>
-            <Content path="/{params.path}" />
-        </Route>
-    </Router>
-</div>
+<Router url="{url}">
+    <Route path="/" let:params>
+        <Home />
+    </Route>
+    <Route path="/*path" let:params>
+        <Content path="/{params.path}" />
+    </Route>
+</Router>
 
 <Footer />
 
diff --git a/src/components/routes/Content.svelte b/src/components/routes/Content.svelte
index 62e2b0d..4eed7a0 100644
--- a/src/components/routes/Content.svelte
+++ b/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>
diff --git a/src/components/widgets/LanguageChooser.svelte b/src/components/widgets/LanguageChooser.svelte
index 33abfc4..67a4666 100644
--- a/src/components/widgets/LanguageChooser.svelte
+++ b/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}
-        <div
-            class="lang"
-            class:active="{$currentLang === language}"
-            on:click="{() => {
-                $currentLang = language
-            }}"
-        >
-            {language}
+    {#each languages as lang}
+        <div class="lang" class:active="{$currentLang === lang}" on:click="{() => setLanguage(lang)}">
+            {lang}
         </div>
     {/each}
 </div>
diff --git a/src/components/widgets/Navigation.svelte b/src/components/widgets/Navigation.svelte
index dcc7e29..be7f6eb 100644
--- a/src/components/widgets/Navigation.svelte
+++ b/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
             }
         })
diff --git a/src/css/theme-2022/components/general.less b/src/css/theme-2022/components/general.less
index 0dd46c3..25b014b 100755
--- a/src/css/theme-2022/components/general.less
+++ b/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;
+    }
+}
diff --git a/src/css/theme-2022/components/language-chooser.less b/src/css/theme-2022/components/language-chooser.less
index cfe3887..b677fe0 100644
--- a/src/css/theme-2022/components/language-chooser.less
+++ b/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;
-            color: black;
+            background: @primary;
+            color: @on-primary;
         }
 
         &.active {
-            background: #ccc;
-            color: black;
+            background: @primary;
+            color: @on-primary;
             font-weight: 700;
         }
     }