complete mobile navbar

src/lib/components/functional/Navbar.svelte

@@ -138,13 +138,14 @@
 		{#if linkRects[selectedIndex]}
 			<div
 				class="absolute bg-panel-accented rounded-xl"
-				style="width: {linkRects[selectedIndex]
+				style="width: {linkRects[selectedIndex].width}px; height: {linkRects[selectedIndex].height}px; top: {linkRects[selectedIndex].top - (containerRect?.top || 0)}px; left: {linkRects[selectedIndex].left - (containerRect?.left || 0)}px; transition: left var(--transition) {duration}ms, top var(--transition) {duration}ms;"
-					.width}px; height: {linkRects[selectedIndex]
-					.height}px; top: {linkRects[selectedIndex].top -
-					32}px; left: {linkRects[selectedIndex].left -
-					(containerRect?.left ||
-						0)}px; transition: left var(--transition) {duration}ms,  top var(--transition) {duration}ms;"
 			></div>
+			{#if browser && window.innerWidth < 768}
+				<div
+					class="absolute bg-panel-accented rounded-xl"
+					style="width: {linkRects[selectedIndex].width}px; height: {linkRects[selectedIndex].height / 2}px; bottom: {window.innerHeight - linkRects[selectedIndex].bottom}px; left: {linkRects[selectedIndex].left - (containerRect?.left || 0)}px; transition: left var(--transition) {duration}ms, bottom var(--transition) {duration}ms;"
+				></div>
+			{/if}
 		{/if}
 		<div
 			class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import { beforeNavigate, goto } from "$app/navigation";
 	import { page } from "$app/stores";
 	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
@@ -7,6 +8,7 @@
 	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
 	import Navbar from "$lib/components/functional/Navbar.svelte";
 	import Footer from "$lib/components/visual/Footer.svelte";
+	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	import { files } from "$lib/store/index.svelte";
 	import {
 		InfoIcon,
@@ -23,6 +25,7 @@
 
 	let shouldGoBack = writable(false);
 	let navbar = $state<HTMLDivElement>();
+	let isMobile = $state(false);
 	let hover = $state(false);
 
 	const items = $derived<
@@ -79,6 +82,20 @@
 
 		navbar?.addEventListener("mouseenter", mouseEnter);
 		navbar?.addEventListener("mouseleave", mouseLeave);
+
+		if (browser) {
+			isMobile = window.innerWidth < 768;
+
+			const handleResize = () => {
+				isMobile = window.innerWidth < 768;
+			};
+
+			window.addEventListener("resize", handleResize);
+
+			return () => {
+				window.removeEventListener("resize", handleResize);
+			};
+		}
 	});
 
 	let goingLeft = $state(false);
@@ -112,46 +129,67 @@
 
 <div class="flex flex-col h-screen">
 	<!-- TODO add logo -->
-	<div class="p-8 w-screen flex justify-center z-50">
+
-		<div class="flex flex-col justify-center items-center gap-4">
+	<!-- Mobile logo -->
-			<Navbar {items} />
+	{#if isMobile}
-			{#if items
+		<div class="flex justify-center items-center p-8">
-				.find((i) => i.url === "/convert")
+			<div
-				?.activeMatch($page.url.pathname)}
+				class="flex items-center justify-center w-36 h-20 bg-panel p-4 rounded-2xl"
+			>
 				<div
-					in:blur={{
+					class="w-[120px] h-14 bg-accent rounded-xl flex items-center justify-center"
-						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,
-						},
-					}}
 				>
-					<ConversionPanel />
+					<div class="h-5 w-full">
+						<Logo />
+					</div>
 				</div>
-			{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
+
+	<!-- Desktop navbar -->
+	{#if !isMobile}
+		<div class="flex p-8 w-screen justify-center z-50">
+			<div class="flex flex-col justify-center items-center gap-4">
+				<Navbar {items} />
+				{#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,
+							},
+						}}
+					>
+						<ConversionPanel />
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
 
 	<div class="grid grid-rows-1 grid-cols-1 h-full">
 		{#key data.pathname}
@@ -190,7 +228,9 @@
 					<div class="flex-grow">
 						{@render children()}
 					</div>
-					<div class="w-full h-14 border-t border-separator relative">
+					<div
+						class="hidden md:block w-full h-14 border-t border-separator relative"
+					>
 						<Footer
 							class="w-full h-full"
 							items={{
@@ -206,6 +246,49 @@
 			</div>
 		{/key}
 	</div>
+
+	{#if isMobile}
+		<div class="fixed 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,
+							},
+						}}
+					>
+						<ConversionPanel />
+					</div>
+				{/if}
+				<Navbar {items} />
+			</div>
+		</div>
+	{/if}
 </div>
 
 {#if data.pathname === "/"}