From 672379c27bc1b6084e69fc1a01f04cc55e037193 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Tue, 3 Dec 2024 03:12:17 +0100
Subject: [PATCH] update admin layout

---
 .../PaginationTableBody.svelte                |  2 +
 src/routes/admin/+layout.svelte               | 60 +++++++++++++------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/PaginationTable/PaginationTableBody.svelte b/src/lib/components/PaginationTable/PaginationTableBody.svelte
index 6c5cd8c..e6498d5 100644
--- a/src/lib/components/PaginationTable/PaginationTableBody.svelte
+++ b/src/lib/components/PaginationTable/PaginationTableBody.svelte
@@ -24,6 +24,8 @@
 		await onUpdate();
 		await tick();
 
+		if (!bodyElem) return;
+
 		const intersectionObserver = new IntersectionObserver(
 			async (entries, observer) => {
 				if (entries.filter((e) => e.isIntersecting).length === 0 || !entries) return;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 467c7c2..3557fa2 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { fly } from 'svelte/transition';
 	import { env } from '$env/dynamic/public';
 	import {
 		ArrowLeftOnRectangle,
-		Cog6Tooth,
+		AdjustmentsHorizontal,
 		Flag,
 		UserGroup,
 		Users,
@@ -16,6 +17,8 @@
 
 	let { children, data } = $props();
 
+	let transitionPrefix = $state(0);
+
 	async function logout() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
 			method: 'POST'
@@ -62,18 +65,17 @@
 		},
 		{
 			path: `${env.PUBLIC_BASE_PATH}/admin/settings`,
-			icon: Cog6Tooth,
+			icon: AdjustmentsHorizontal,
 			name: 'Website Einstellungen',
 			badge: null,
 			enabled: data.settingsRead
 		}
 	];
 
-	let pageTitleSuffix =
-		(tabs.find((t) => $page.url.pathname === t.path)?.name ??
-		$page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login`)
-			? 'Login '
-			: null;
+	let pageTitleSuffix = $derived(
+		tabs.find((t) => $page.url.pathname === t.path)?.name ??
+			($page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login` ? 'Login' : null)
+	);
 </script>
 
 <svelte:head>
@@ -81,23 +83,34 @@
 </svelte:head>
 
 {#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
-	<div class="h-12 relative bg-base-200 flex justify-center items-center">
-		<ul class="menu menu-horizontal h-10 p-0 flex items-center bg-base-300 rounded-lg">
-			{#each tabs as tab}
+	<div class="relative bg-base-200 w-full flex justify-center">
+		<div role="tablist" class="tabs tabs-lifted">
+			{#each tabs as tab, i}
 				{#if tab.enabled}
 					{@const Icon = tab.icon}
-					<li>
-						<a href={tab.path}>
+					<a
+						role="tab"
+						class="tab h-full"
+						class:tab-active={$page.url.pathname === tab.path}
+						href={tab.path}
+						onclick={() => {
+							let currIdx = tabs.findIndex((t) => $page.url.pathname === t.path);
+							if (currIdx !== -1) {
+								transitionPrefix = currIdx < i ? 1 : -1;
+							}
+						}}
+					>
+						<span class="my-2 flex items-center space-x-1">
 							<Icon />
-							<span class="mr-1" class:underline={$page.url.pathname === tab.path}>{tab.name}</span>
+							<span>{tab.name}</span>
 							{#if tab.badge != null}
 								<div class="badge">{tab.badge}</div>
 							{/if}
-						</a>
-					</li>
+						</span>
+					</a>
 				{/if}
 			{/each}
-		</ul>
+		</div>
 		<div class="absolute top-0 right-0 flex items-center h-full">
 			<ul class="menu menu-vertical">
 				<li>
@@ -109,8 +122,19 @@
 			</ul>
 		</div>
 	</div>
-	<div class="h-full w-full -mt-12 pt-12 overflow-y-scroll overflow-x-hidden">
-		{@render children()}
+	<div class="grid">
+		{#key $page.url.pathname}
+			<div
+				class="col-[1] row-[1] h-full w-full overflow-y-scroll overflow-x-hidden"
+				in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 150 }}
+				out:fly={{
+					x: transitionPrefix * -window.innerWidth,
+					duration: !transitionPrefix ? 0 : 150
+				}}
+			>
+				{@render children()}
+			</div>
+		{/key}
 	</div>
 {:else}
 	<div class="h-full w-full">