🪛 Makes topbar fully responsive

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,36 +22,24 @@
 		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="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:450px; background-color:#36393f"
+                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="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" />
@@ -90,7 +69,7 @@
                 </div>
             </div>
         </div>
-	<div class="w-20 p-4 text-right">{Math.floor($data[8])}°🌡️</div>
+    </div>
 </div>
 
 <style scoped>