1 files changed, 57 insertions, 0 deletions

diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
new file mode 100644
index 0000000..f349632
--- /dev/null
+++ b/fe/src/lib/Layout.svelte
@@ -0,0 +1,57 @@
+<script>
+import { authenticated, token } from '../stores/auth';
+
+const logout = () => token.unauthenticate();
+
+function showSettingsDialog() {
+    console.log('show settings');
+}
+
+</script>
+
+<div class="layout">
+    {#if $authenticated}
+    <nav>
+        <div>
+            <h1>Water</h1>
+        </div>
+        <div>
+            <button on:click={showSettingsDialog}>Settings</button>
+            <button on:click={logout}>Logout</button>
+        </div>
+    </nav>
+    {/if}
+    <div id="content">
+        <slot />
+    </div>
+</div>
+
+<style>
+.layout {
+    height: 100vh;
+}
+nav {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   justify-content: space-between;
+   height: 64px;
+   padding: 0 2em;
+}
+
+nav div {
+    width: fit-content;
+}
+
+nav div h1 {
+    font-size: 1.75em;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 3em 0;
+}
+</style>