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.svelte77
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>
2import { authenticated, token } from '../stores/auth'; 2 import { authenticated, token } from "../stores/auth";
3 3 import PreferencesForm from "./PreferencesForm.svelte";
4const logout = () => token.unauthenticate(); 4 const logout = () => token.unauthenticate();
5 5 let open = false;
6function 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 }
33nav { 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
42nav div { 47 nav div {
43 width: fit-content; 48 width: fit-content;
44} 49 }
45 50
46nav 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>