GUI base navigation & home

theseus_gui/src/components/layout/Page.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { Svrollbar } from 'svrollbar'
+
+    let viewport: Element
+    let contents: Element
+</script>
+
+<div class="page">
+    <div bind:this={viewport} class="viewport">
+        <div bind:this={contents} class="contents">
+            <slot />
+        </div>
+    </div>
+    <Svrollbar {viewport} {contents} />
+</div>
+
+<style>
+    .page {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+
+        --svrollbar-track-width: 20px;
+        --svrollbar-track-opacity: 0;
+
+        --svrollbar-thumb-width: 8px;
+        --svrollbar-thumb-background: hsla(216,5%,60%);
+        --svrollbar-thumb-opacity: 0.9;
+    }
+
+    .viewport {
+        position: relative;
+        width: 100%;
+        height: calc(100vh - 2.5rem);
+        overflow-y: scroll;
+        overflow-x: hidden;
+
+        /* hide scrollbar */
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .viewport::-webkit-scrollbar {
+        /* hide scrollbar */
+        display: none;
+    }
+
+    :global(.v-thumb) {
+        margin: 4px auto 4px auto !important;
+    }
+</style>