1 files changed, 62 insertions, 54 deletions

diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 94ce84d..f208f34 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,62 +1,70 @@
 <script>
-  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;
-  }
+    import { authenticated, token } from "../stores/auth";
+    import PreferencesForm from "./PreferencesForm.svelte";
+    import { addFormOpen } from "../stores/forms";
+
+    const logout = () => token.unauthenticate();
+    let preferenceFormOpen = false;
+
+    function showPreferencesDialog() {
+        preferenceFormOpen = true;
+    }
+
+    function closePreferenceDialog() {
+        preferenceFormOpen = false;
+    }
+
+    function showAddDialog() {
+        addFormOpen.set(true);
+    }
 </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>
-    <PreferencesForm {open} on:close={closeDialog} />
-  {/if}
-  <div id="content">
-    <slot />
-  </div>
+    {#if $authenticated}
+        <nav>
+            <div>
+                <h1>Water</h1>
+            </div>
+            <div>
+                <button on:click={showAddDialog}>Log Water</button>
+                <button on:click={showPreferencesDialog}>Preference</button>
+                <button on:click={logout}>Logout</button>
+            </div>
+        </nav>
+        <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
+    {/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;
-  }
+    .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: row;
+        justify-content: center;
+        gap: 2em;
+        margin-top: 4em;
+    }
 </style>