From f94a8e9a4c1ee861ce8a5ff2efdba256c8c60b55 Mon Sep 17 00:00:00 2001
From: zaanposni <me@zaanposni.com>
Date: Sun, 21 Jan 2024 11:32:23 +0100
Subject: [PATCH] use tabnavigation for mobile, fixes #

---
 .../src/lib/components/BigHeader.svelte       | 40 ++++++++++
 .../src/lib/components/Footer.svelte          | 78 ++++++++++++++-----
 src/psaggregator/src/routes/+layout.svelte    | 33 +-------
 3 files changed, 103 insertions(+), 48 deletions(-)
 create mode 100644 src/psaggregator/src/lib/components/BigHeader.svelte

diff --git a/src/psaggregator/src/lib/components/BigHeader.svelte b/src/psaggregator/src/lib/components/BigHeader.svelte
new file mode 100644
index 0000000..c2622ff
--- /dev/null
+++ b/src/psaggregator/src/lib/components/BigHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { AppBar, LightSwitch } from "@skeletonlabs/skeleton";
+    import MediaQuery from "$lib/utils/MediaQuery.svelte";
+    import { KOFI_USERNAME, LEGAL_URL } from "../../config/config";
+</script>
+
+<MediaQuery query="(min-width: 768px)" let:matches>
+    <AppBar>
+        <div slot="lead" class="flex flex-row items-center gap-x-4">
+            <a href="/">
+                <img src="/ps.png" alt="PS Aggregator Logo" class="h-8 w-8" />
+            </a>
+            {#if matches}
+                <a href="/">Home</a>
+                <a href="/thumbnails">Thumbnails</a>
+                <a href="/api">API</a>
+                <a href="/motivation">Motivation</a>
+                <a href="https://github.com/zaanposni/psaggregator/" target="_blank">
+                    <span>GitHub</span>
+                </a>
+            {/if}
+            {#if KOFI_USERNAME}
+                <a href="https://ko-fi.com/{KOFI_USERNAME}" target="_blank">
+                    <span>Ko-fi</span>
+                </a>
+            {/if}
+            <a href="https://pietsmiet.de" target="_blank">
+                <span>PietSmiet.de</span>
+            </a>
+            {#if !matches && LEGAL_URL}
+                <a href={LEGAL_URL} target="_blank">
+                    <span>Legal</span>
+                </a>
+            {/if}
+        </div>
+        <svelte:fragment slot="trail">
+            <LightSwitch />
+        </svelte:fragment>
+    </AppBar>
+</MediaQuery>
diff --git a/src/psaggregator/src/lib/components/Footer.svelte b/src/psaggregator/src/lib/components/Footer.svelte
index 4305478..06fea76 100644
--- a/src/psaggregator/src/lib/components/Footer.svelte
+++ b/src/psaggregator/src/lib/components/Footer.svelte
@@ -2,32 +2,72 @@
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import { LEGAL_URL, MAIL_TO_URL } from "../../config/config";
     import { version } from "$app/environment";
+    import { TabAnchor, TabGroup } from "@skeletonlabs/skeleton";
+    import { page } from "$app/stores";
+    import { Api, FavoriteFilled, Home, Thumbnail_2 } from "carbon-icons-svelte";
 </script>
 
 <MediaQuery query="(min-width: 768px)" let:matches>
-    <div class="flex w-full flex-row flex-wrap items-center gap-x-4 p-2 lg:flex-nowrap">
-        <span class="mr-12 text-sm md:text-base">
-            <a href="https://github.com/zaanposni/psaggregator/" target="_blank">
-                <span>PS Aggregator</span>
-            </a>by
-            <a href="https://github.com/zaanposni" target="_blank">
-                <span>zaanposni</span>
-            </a>
-        </span>
-        {#if matches}
+    {#if matches}
+        <div class="flex w-full flex-row flex-wrap items-center gap-x-4 p-2 lg:flex-nowrap">
+            <span class="mr-12 text-sm md:text-base">
+                <a href="https://github.com/zaanposni/psaggregator/" target="_blank">
+                    <span>PS Aggregator</span>
+                </a>by
+                <a href="https://github.com/zaanposni" target="_blank">
+                    <span>zaanposni</span>
+                </a>
+            </span>
             <a href={MAIL_TO_URL} target="_blank">
                 <span>Kontakt</span>
             </a>
             <a href="https://github.com/zaanposni/psaggregator/" target="_blank">
                 <span>GitHub</span>
             </a>
-        {/if}
-        {#if LEGAL_URL}
-            <a href={LEGAL_URL} class="text-sm md:text-base" target="_blank">
-                <span>Legal</span>
-            </a>
-        {/if}
-        <span class="ml-auto">v{version}</span>
-        <span class="text-xs md:text-base"> Dies ist ein privates Projekt und steht in keiner Verbindung zur PietSmiet UG & Co. KG. </span>
-    </div>
+            {#if LEGAL_URL}
+                <a href={LEGAL_URL} class="text-sm md:text-base" target="_blank">
+                    <span>Legal</span>
+                </a>
+            {/if}
+            <span class="ml-auto">v{version}</span>
+            <span class="text-xs md:text-base">
+                Dies ist ein privates Projekt und steht in keiner Verbindung zur PietSmiet UG & Co. KG.
+            </span>
+        </div>
+    {:else}
+        <TabGroup
+            justify="justify-center"
+            active="variant-filled-primary"
+            hover="hover:variant-soft-primary"
+            flex="flex-1 lg:flex-none"
+            rounded=""
+            border=""
+            class="bg-surface-100-800-token w-full">
+            <TabAnchor href="/" selected={$page.url.pathname === "/"}>
+                <div class="flex justify-center" slot="lead">
+                    <Home />
+                </div>
+                <span>Home</span>
+            </TabAnchor>
+            <TabAnchor href="/thumbnails" selected={$page.url.pathname === "/thumbnails"}>
+                <div class="flex justify-center" slot="lead">
+                    <Thumbnail_2 />
+                </div>
+                <span>Thumbnails</span>
+            </TabAnchor>
+            <TabAnchor href="/api" selected={$page.url.pathname === "/api"}>
+                <div class="flex justify-center" slot="lead">
+                    <Api />
+                </div>
+                <span>API</span>
+            </TabAnchor>
+            <TabAnchor href="/motivation" selected={$page.url.pathname === "/motivation"}>
+                <div class="flex justify-center" slot="lead">
+                    <FavoriteFilled />
+                </div>
+                <span>Motivation</span>
+            </TabAnchor>
+            <!-- ... -->
+        </TabGroup>
+    {/if}
 </MediaQuery>
diff --git a/src/psaggregator/src/routes/+layout.svelte b/src/psaggregator/src/routes/+layout.svelte
index 8fee6ae..3c58b42 100644
--- a/src/psaggregator/src/routes/+layout.svelte
+++ b/src/psaggregator/src/routes/+layout.svelte
@@ -1,10 +1,11 @@
 <script>
     import "../app.css";
-    import { Drawer, Modal, Toast, AppShell, AppBar, LightSwitch } from "@skeletonlabs/skeleton";
+    import { Drawer, Modal, Toast, AppShell } from "@skeletonlabs/skeleton";
     import { initializeStores } from "@skeletonlabs/skeleton";
     import Footer from "$lib/components/Footer.svelte";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
-    import { KOFI_USERNAME, MICROANALYTICS_ID } from "../config/config";
+    import { MICROANALYTICS_ID } from "../config/config";
+    import BigHeader from "$lib/components/BigHeader.svelte";
 
     initializeStores();
 </script>
@@ -13,33 +14,7 @@
     <div style="display: contents" class="h-full overflow-hidden">
         <AppShell>
             <svelte:fragment slot="header">
-                <AppBar>
-                    <div slot="lead" class="flex flex-row items-center gap-x-4">
-                        <a href="/">
-                            <img src="/ps.png" alt="PS Aggregator Logo" class="h-8 w-8" />
-                        </a>
-                        <a href="/">Home</a>
-                        {#if matches}
-                            <a href="/thumbnails">Thumbnails</a>
-                            <a href="/api">API</a>
-                            <a href="/motivation">Motivation</a>
-                            <a href="https://github.com/zaanposni/psaggregator/" target="_blank">
-                                <span>GitHub</span>
-                            </a>
-                            {#if KOFI_USERNAME}
-                                <a href="https://ko-fi.com/{KOFI_USERNAME}" target="_blank">
-                                    <span>Ko-fi</span>
-                                </a>
-                            {/if}
-                            <a href="https://pietsmiet.de" target="_blank">
-                                <span>PietSmiet.de</span>
-                            </a>
-                        {/if}
-                    </div>
-                    <svelte:fragment slot="trail">
-                        <LightSwitch />
-                    </svelte:fragment>
-                </AppBar>
+                <BigHeader />
             </svelte:fragment>
             <slot />
             <svelte:fragment slot="footer">