aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/Layout.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/Layout.svelte')
-rw-r--r--fe/src/lib/Layout.svelte116
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 @@
1<script> 1<script>
2 import { authenticated, token } from "../stores/auth"; 2 import { authenticated, token } from "../stores/auth";
3 import PreferencesForm from "./PreferencesForm.svelte"; 3 import PreferencesForm from "./PreferencesForm.svelte";
4 const logout = () => token.unauthenticate(); 4 import { addFormOpen } from "../stores/forms";
5 let open = false; 5
6 6 const logout = () => token.unauthenticate();
7 function showSettingsDialog() { 7 let preferenceFormOpen = false;
8 open = true; 8
9 } 9 function showPreferencesDialog() {
10 10 preferenceFormOpen = true;
11 function closeDialog() { 11 }
12 open = false; 12
13 } 13 function closePreferenceDialog() {
14 preferenceFormOpen = false;
15 }
16
17 function showAddDialog() {
18 addFormOpen.set(true);
19 }
14</script> 20</script>
15 21
16<div class="layout"> 22<div class="layout">
17 {#if $authenticated} 23 {#if $authenticated}
18 <nav> 24 <nav>
19 <div> 25 <div>
20 <h1>Water</h1> 26 <h1>Water</h1>
21 </div> 27 </div>
22 <div> 28 <div>
23 <button on:click={showSettingsDialog}>Settings</button> 29 <button on:click={showAddDialog}>Log Water</button>
24 <button on:click={logout}>Logout</button> 30 <button on:click={showPreferencesDialog}>Preference</button>
25 </div> 31 <button on:click={logout}>Logout</button>
26 </nav> 32 </div>
27 <PreferencesForm {open} on:close={closeDialog} /> 33 </nav>
28 {/if} 34 <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
29 <div id="content"> 35 {/if}
30 <slot /> 36 <div id="content">
31 </div> 37 <slot />
38 </div>
32</div> 39</div>
33 40
34<style> 41<style>
35 .layout { 42 .layout {
36 height: 100vh; 43 height: 100vh;
37 } 44 }
38 nav { 45
39 display: flex; 46 nav {
40 flex-direction: row; 47 display: flex;
41 align-items: center; 48 flex-direction: row;
42 justify-content: space-between; 49 align-items: center;
43 height: 64px; 50 justify-content: space-between;
44 padding: 0 2em; 51 height: 64px;
45 } 52 padding: 0 2em;
46 53 }
47 nav div { 54
48 width: fit-content; 55 nav div {
49 } 56 width: fit-content;
50 57 }
51 nav div h1 { 58
52 font-size: 1.75em; 59 nav div h1 {
53 } 60 font-size: 1.75em;
54 61 }
55 #content { 62
56 display: flex; 63 #content {
57 flex-direction: column; 64 display: flex;
58 justify-content: center; 65 flex-direction: row;
59 align-items: center; 66 justify-content: center;
60 padding: 3em 0; 67 gap: 2em;
61 } 68 margin-top: 4em;
69 }
62</style> 70</style>