aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/Layout.svelte
blob: 2728dd3e966cc2faf1277826b7166ce62cac8c6b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
    import { authenticated, token, user, preferences } from "../stores/auth";
    import PreferencesForm from "./PreferencesForm.svelte";
    import { addFormOpen } from "../stores/forms";

    const logout = () => { 
        preferences.reset();
        user.reset();
        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={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: row;
        justify-content: center;
        gap: 2em;
        margin-top: 4em;
    }
</style>