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