From aedaf76384e1fb76d26a3c430368e64bcead47ad Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 3 Jan 2025 16:41:44 +0300
Subject: [PATCH] better mobile responsiveness

---
 src/lib/components/functional/Navbar.svelte |  4 +--
 src/routes/+layout.svelte                   | 38 +--------------------
 src/routes/convert/+page.svelte             |  4 +++
 3 files changed, 7 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte
index c583030..4fe655f 100644
--- a/src/lib/components/functional/Navbar.svelte
+++ b/src/lib/components/functional/Navbar.svelte
@@ -158,10 +158,10 @@
 		{#each items as item, i (item.url)}
 			{@render link(item, i)}
 		{/each}
-		<div class="w-0.5 bg-separator h-full flex"></div>
+		<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
 		<button
 			onclick={theme.toggle}
-			class="w-14 h-full items-center justify-center flex"
+			class="w-14 h-full items-center justify-center hidden md:flex"
 		>
 			<SunIcon class="dynadark:hidden block" />
 			<MoonIcon class="dynadark:block hidden" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 868cd5c..4bb4722 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -231,43 +231,7 @@
 	<div
 		class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
 	>
-		<div class="flex flex-col justify-center items-center gap-4">
-			{#if items
-				.find((i) => i.url === "/convert")
-				?.activeMatch($page.url.pathname)}
-				<div
-					in:blur={{
-						blurMultiplier: 8,
-						duration: duration + 50,
-						delay: 50,
-						easing: quintOut,
-						y: {
-							start: -24,
-							end: 0,
-						},
-						scale: {
-							start: 0.95,
-							end: 1,
-						},
-					}}
-					out:blur={{
-						blurMultiplier: 8,
-						duration,
-						easing: quintOut,
-						y: {
-							start: 0,
-							end: 24,
-						},
-						scale: {
-							start: 1,
-							end: 1.05,
-						},
-					}}
-					class="w-full"
-				>
-					<ConversionPanel />
-				</div>
-			{/if}
+		<div class="flex flex-col justify-center items-center">
 			<Navbar {items} />
 		</div>
 	</div>
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 08270a0..a230ad3 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { blur, duration } from "$lib/animation";
+	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
 	import Dropdown from "$lib/components/functional/Dropdown.svelte";
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import ProgressiveBlur from "$lib/components/visual/effects/ProgressiveBlur.svelte";
@@ -96,6 +97,9 @@
 	<div
 		class="w-[794px] grid grid-cols-1 md:grid-cols-2 px-4 md:p-0 auto-rows-[240px] gap-4"
 	>
+		<div class="flex md:hidden">
+			<ConversionPanel />
+		</div>
 		{#each files.files as file, i (file.id)}
 			{#if files.files.length >= 2 && i === 1}
 				<Uploader class="w-full h-full" />