From ee119599c36f864f42dd35cc13b94e1b30becc0a Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Wed, 12 Jul 2023 15:24:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9B=20Makes=20topbar=20fully=20respons?=
 =?UTF-8?q?ive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Topbar.svelte | 117 +++++++++++++------------------
 1 file changed, 48 insertions(+), 69 deletions(-)

diff --git a/app/src/components/Topbar.svelte b/app/src/components/Topbar.svelte
index bffeec7..50c469d 100644
--- a/app/src/components/Topbar.svelte
+++ b/app/src/components/Topbar.svelte
@@ -1,29 +1,20 @@
 <script lang="ts">
 	import { isConnected, data } from '../lib/socket';
-	import {
-		Icon,
-		ArrowsPointingIn,
-		ArrowsPointingOut,
-		Sparkles,
-		Bars3,
-		Power
-	} from 'svelte-hero-icons';
+	import { Icon, ArrowsPointingIn, ArrowsPointingOut, Bars3, Power } from 'svelte-hero-icons';
 	import { tweened } from 'svelte/motion';
 	import { quadInOut } from 'svelte/easing';
 	import { sidebarOpen } from '../lib/store';
-	import { humanFileSize } from '../lib/utils';
 
 	let isFullscreen = false;
 
 	const width = tweened(0, {
-		duration: 200,
+		duration: 250,
 		easing: quadInOut
 	});
 
 	function handleClick() {
-		if ($width === 0) width.set(200);
+		if ($width === 0) width.set(75);
 		else width.set(0);
-		console.log('clicked');
 	}
 
 	const toggleFullScreen = () => {
@@ -31,66 +22,54 @@
 		else if (document.exitFullscreen) document.exitFullscreen();
 		isFullscreen = !document.fullscreenElement;
 	};
-
-	const round = (val: number) => {
-		return (Math.round(val * 100) / 100).toFixed(2);
-	};
 </script>
 
 <div class="absolute flex justify-between w-full z-20 h-10" on:dblclick={handleClick}>
-	<div class="w-20 p-4">
-		<button on:click={() => sidebarOpen.set(true)}>
-			<Icon src={Bars3} size="32" />
-		</button>
-	</div>
-	<div>
-		<div
-			style="height:{$width}px; width:450px; background-color:#36393f"
-			class="rounded-b-xl overflow-hidden flex justify-end flex-col"
-		>
-			{#if $width !== 0}
-				<div class="px-4 grid grid-cols-3 w-full">
-					<div class="flex gap-2"><span>RSSI:</span>{$data[0]}db</div>
-					<div class="flex gap-2"><span>MPU:</span>{round($data[1])}°</div>
-					<div class="flex gap-2"><span>CPU:</span>{round($data[8])}°</div>
-					<div class="flex gap-2"><span>X:</span>{round($data[5])}</div>
-					<div class="flex gap-2"><span>Y:</span>{round($data[6])}</div>
-					<div class="flex gap-2"><span>Z:</span>{round($data[7])}</div>
-					<div class="flex gap-2"><span>Left:</span>{round($data[9])}cm</div>
-					<div class="flex gap-2"><span>Right:</span>{round($data[10])}cm</div>
-					<div class="flex gap-2"><span>Heap:</span>{humanFileSize($data[11])}</div>
-					<div class="flex gap-2"><span>Psram:</span>{humanFileSize($data[12])}</div>
-				</div>
-				<div class="flex justify-evenly p-4 w-full">
-					<button on:click={toggleFullScreen}>
-						<Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" />
-					</button>
-					<button>
-						<Icon src={Power} size="32" />
-					</button>
-				</div>
-			{/if}
-		</div>
-		<div class="flex justify-center" on:mouseup={handleClick}>
-			<svg height="40" width="300" class="Settings_topSVG__2VXbU">
-				<path
-					stroke="none"
-					fill="#36393f"
-					d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z"
-				/>
-			</svg>
-			<div
-				class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
-			{$isConnected ? 'connected' : 'disconnected'}"
-			>
-				<span class="dot h-4 w-4" />
-				<span class="dot h-4 w-4" />
-				<span class="dot h-4 w-4" />
-				<span class="dot h-4 w-4" />
-			</div>
-		</div>
-	</div>
-	<div class="w-20 p-4 text-right">{Math.floor($data[8])}°🌡️</div>
+    <div class="absolute flex justify-between w-full">
+        <div class="w-20 p-4">
+            <button on:click={() => sidebarOpen.set(true)}>
+                <Icon src={Bars3} size="32" />
+            </button>
+        </div>
+        <div class="w-20 p-4 text-right">{Math.floor($data[5])}°🌡️</div>
+    </div>
+    <div class="absolute flex justify-center w-full">
+        <div>
+            <div
+                style="height:{$width}px; width:300px; background-color:#36393f"
+                class="rounded-b-xl overflow-hidden flex justify-end flex-col"
+            >
+                {#if $width !== 0}
+                    <div class="flex justify-evenly p-4 w-full">
+                        <button on:click={toggleFullScreen}>
+                            <Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" />
+                        </button>
+                        <button>
+                            <Icon src={Power} size="32" />
+                        </button>
+                    </div>
+                {/if}
+            </div>
+            <div class="flex justify-center" on:mouseup={handleClick}>
+                <svg height="40" width="300" class="Settings_topSVG__2VXbU">
+                    <path
+                        stroke="none"
+                        fill="#36393f"
+                        d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z"
+                    />
+                </svg>
+                <div
+                    class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
+                {$isConnected ? 'connected' : 'disconnected'}"
+                >
+                    <span class="dot h-4 w-4" />
+                    <span class="dot h-4 w-4" />
+                    <span class="dot h-4 w-4" />
+                    <span class="dot h-4 w-4" />
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <style scoped>