🙃

frontend/src/routes/+page.svelte

@@ -1,24 +1,37 @@
 <script lang="ts">
-	import SunIcon from '@lucide/svelte/icons/sun';
-	import MoonIcon from '@lucide/svelte/icons/moon';
-
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { toggleMode } from 'mode-watcher';
 	import Grid from '$lib/components/grid/grid.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { fade } from 'svelte/transition';
+
+	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
+	const sidebar = useSidebar();
 
 	let socket = new WebSocket('ws://localhost:7050');
 </script>
 
-<!-- <Button onclick={toggleMode} variant="outline" size="icon"> -->
-<!-- 	<SunIcon -->
-<!-- 		class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90" -->
-<!-- 	/> -->
-<!-- 	<MoonIcon -->
-<!-- 		class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0" -->
-<!-- 	/> -->
-<!-- 	<span class="sr-only">Toggle theme</span> -->
-<!-- </Button> -->
+{#if sidebar?.openMobile || sidebar?.open}
+	<button
+		class="fixed inset-0 z-[700] bg-black/40"
+		aria-label="Close sidebar"
+		onclick={() => (sidebar.isMobile ? sidebar.setOpenMobile(false) : sidebar.setOpen(false))}
+		transition:fade={{ duration: 100 }}
+	></button>
+{/if}
 
-<div class="m-0">
-	<Grid {socket} />
+<div class="absolute left-0 min-h-0 w-full">
+	<div class="flex h-[100vh] flex-col">
+		<div class="h-[60px] w-full p-3">
+			<Sidebar.Trigger />
+		</div>
+
+		<div class="grid-wrapper min-h-0 w-full flex-1">
+			<Grid class="h-full min-w-0" {socket} />
+		</div>
+	</div>
 </div>
+
+<style>
+	.grid-wrapper {
+		border-top: 2px solid var(--color-input);
+	}
+</style>