blob: fb34593ef31e59273696096449723af4879ec34d (
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
80
81
82
83
84
85
86
87
|
<script>
import {onMount} from "svelte";
import {location, link} from "svelte-spa-router";
import {logout_user} from "$app/lib/services/user-service";
import {random_string} 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";
import LL from "$app/lib/i18n/i18n-svelte";
import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte";
import {currentLocale} from "$app/lib/stores/locale";
let ProfileModalFunctions = {};
let showUserMenu = false;
let userMenuTriggerNode;
const userMenuId = "__menu_" + random_string(3);
const username = get_session_data()?.profile.username;
function toolbelt_change(event) {
if (event.detail.name === "locale") {
currentLocale.set(event.detail.value);
}
}
onMount(() => {
userMenuTriggerNode = document.getElementById("open-user-menu");
});
</script>
<ProfileModal bind:functions={ProfileModalFunctions}/>
<BlowoutToolbelt on:change={toolbelt_change}/>
<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 === '/' || $location.startsWith('/home')) ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.home()}</a>
</div>
<div class="tab-v2">
<a href="/data"
use:link
class="tabs-nav-v2__item {$location.startsWith('/data') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.data()}</a>
</div>
<div class="tab-v2">
<a href="/settings"
use:link
class="tabs-nav-v2__item {$location.startsWith('/settings') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.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="{$LL.nav.usermenu.toggleTitle()}"
aria-controls="{userMenuId}"
/>
<Menu bind:show="{showUserMenu}"
trigger={userMenuTriggerNode}
id="{userMenuId}">
<div slot="options">
<MenuItem on:click={() => ProfileModalFunctions.open()}>
<span title="{$LL.nav.usermenu.profileTitle()}">{$LL.nav.usermenu.profile()}</span>
</MenuItem>
<MenuItemSeparator/>
<MenuItem danger="true"
on:click={() => logout_user()}>
<span title="{$LL.nav.usermenu.logoutTitle()}">{$LL.nav.usermenu.logout()}</span>
</MenuItem>
</div>
</Menu>
</div>
</div>
</nav>
<main class="container max-width-xl">
<slot/>
</main>
|
