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