1 files changed, 41 insertions, 36 deletions

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