GUI base navigation & home

theseus_gui/src/routes/__layout.svelte

@@ -1,11 +1,45 @@
 <script lang="ts">
-
+    import '@fontsource/inter'
+    import Sidebar from '$lib/../components/layout/Sidebar.svelte'
+    import StatusBar from "../components/layout/StatusBar.svelte";
+    import Page from "../components/layout/Page.svelte";
 </script>
 
-<main>
-	<slot />
-</main>
+<svelte:head>
+    <style lang="postcss">
+        @import "../styles/global.postcss";
+    </style>
+</svelte:head>
 
-<style>
+<div class="app">
+    <Sidebar />
+    <StatusBar />
+    <Page>
+        <slot/>
+    </Page>
+</div>
 
+<style lang="postcss">
+    .app {
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-areas:
+            "sidebar status-bar"
+            "sidebar page";
+        grid-template-rows: 2.5rem 1fr;
+        grid-template-columns: 14rem 1fr;
+    }
+
+    :global(.page) {
+        grid-area: page;
+    }
+
+    :global(.sidebar) {
+        grid-area: sidebar;
+    }
+
+    :global(.status-bar) {
+        grid-area: status-bar;
+    }
 </style>