1 files changed, 79 insertions, 0 deletions
diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte
new file mode 100644
index 0000000..24a9370
--- /dev/null
+++ b/apps/projects/src/app/pages/_layout.svelte
@@ -0,0 +1,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>