Skip to content

Commit

Permalink
use tabnavigation for mobile, fixes #
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaanposni
zaanposni committed Jan 21, 2024
1 parent 8205dcb commit f94a8e9
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 48 deletions.
40 changes: 40 additions & 0 deletions src/psaggregator/src/lib/components/BigHeader.svelte
View file
Original file line number Diff line number Diff line change
@@ -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>
78 changes: 59 additions & 19 deletions src/psaggregator/src/lib/components/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
33 changes: 4 additions & 29 deletions src/psaggregator/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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">
Expand Down

0 comments on commit f94a8e9

Please sign in to comment.