blob: 24a9370cf8d723a87568ed717a1a11a8543d5996 (
plain) (
blame)
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
75
76
77
78
79
|
<script>
import {onMount} from "svelte";
import {location, link} from "svelte-spa-router";
import {logout_user} from "$app/lib/services/user-service";
import {random_string, switch_theme} from "$shared/lib/helpers";
import {get_session_data} from "$shared/lib/session";
import ProfileModal from "$app/pages/views/profile-modal.svelte";
import {Menu, MenuItem, MenuItemSeparator} from "$shared/components/menu";
import Button from "$shared/components/button.svelte";
import {IconNames} from "$shared/lib/configuration";
let ProfileModalFunctions = {};
let showUserMenu = false;
let userMenuTriggerNode;
const userMenuId = "__menu_" + random_string(3);
const username = get_session_data().profile.username;
onMount(() => {
userMenuTriggerNode = document.getElementById("open-user-menu");
});
</script>
<ProfileModal bind:functions={ProfileModalFunctions}/>
<nav class="container max-width-xl@md width-fit-content@md width-100% max-width-none margin-y-xs@md margin-bottom-xs block@md position-relative@md position-absolute bottom-unset@md bottom-0">
<div class="tabs-nav-v2 justify-between">
<div class="tab-v2">
<div class="tab-v2">
<a href="/home"
use:link
class="tabs-nav-v2__item {$location === '/home' ? 'tabs-nav-v2__item--selected' : ''}">Home</a>
</div>
<div class="tab-v2">
<a href="/data"
use:link
class="tabs-nav-v2__item {$location === '/data' ? 'tabs-nav-v2__item--selected' : ''}">Data</a>
</div>
<div class="tab-v2">
<a href="/settings"
use:link
class="tabs-nav-v2__item {$location === '/settings' ? 'tabs-nav-v2__item--selected' : ''}">Settings</a>
</div>
</div>
<div class="tab-v2 padding-x-sm">
<Button class="user-menu-control"
variant="reset"
id="open-user-menu"
on:click={() => showUserMenu = !showUserMenu}
text={username}
icon={IconNames.chevronDown}
icon_width="2rem"
icon_height="2rem"
icon_right_aligned="true"
title="Toggle user menu"
aria-controls="{userMenuId}"
/>
<Menu bind:show="{showUserMenu}"
trigger={userMenuTriggerNode}
id="{userMenuId}">
<div slot="options">
<MenuItem on:click={() => ProfileModalFunctions.open()}>
<span title="Administrate your profile">Profile</span>
</MenuItem>
<MenuItem on:click={() => switch_theme()}>
<span title="Change between a dark and light theme">Switch theme</span>
</MenuItem>
<MenuItemSeparator/>
<MenuItem danger="true" on:click={() => logout_user()}>
<span title="Log out of your profile">Log out</span>
</MenuItem>
</div>
</Menu>
</div>
</div>
</nav>
<main class="container max-width-xl">
<slot/>
</main>
|
