Add menu button to filesystem

svelte/src/filesystem/Menu.svelte

@@ -0,0 +1,103 @@
+<script>
+import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
+import Button from "../layout/Button.svelte";
+import Euro from "../util/Euro.svelte";
+import { formatDataVolume } from "../util/Formatting.svelte";
+
+let button
+let dialog
+
+const open = () => {
+	dialog.showModal()
+
+	let rect = button.getBoundingClientRect()
+	dialog.style.top = Math.round(rect.bottom) + "px"
+	dialog.style.left = Math.round(rect.left) + "px"
+}
+
+// Close the dialog when the user clicks the background
+const click = e => {
+	if (e.target === dialog) {
+		dialog.close()
+	}
+}
+</script>
+
+<div class="wrapper">
+	<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
+		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
+		<span>
+			{window.user.username === "" ? "Pixeldrain" : window.user.username}
+		</span>
+	</button>
+</div>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog bind:this={dialog} on:click={click}>
+	<div class="menu">
+		{#if window.user.username !== ""}
+			<div class="stats_table">
+				<div>Subscription</div>
+				<div>{window.user.subscription.name}</div>
+
+				{#if window.user.subscription.type === "prepaid"}
+					<div>Credit</div>
+					<div><Euro amount={window.user.balance_micro_eur}/></div>
+				{/if}
+
+				<div>Storage used</div>
+				<div>{formatDataVolume(window.user.filesystem_storage_used, 3)}</div>
+				<div>Transfer used</div>
+				<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
+			</div>
+			<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
+			<Button link_href="/user" icon="person" label="Profile"/>
+			<Button link_href="/user/settings" icon="settings" label="Settings"/>
+			<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
+			<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
+		{:else}
+			<Button link_href="/" icon="home" label="Home"/>
+			<Button link_href="/#pro" icon="star" label="Get Premium"/>
+			<Button link_href="/login" icon="person" label="Log in"/>
+			<Button link_href="/register" icon="person" label="Register"/>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+.wrapper {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: inline;
+	align-self: center;
+}
+
+.button {
+	flex: 0 0 content;
+	background: none;
+	margin: 0;
+	color: var(--body_text_color);
+	box-shadow: none;
+}
+
+dialog {
+	background-color: var(--card_color);
+	color: var(--body_text_color);
+	border-radius: 8px;
+	border: none;
+	padding: 4px;
+	margin: 0;
+	box-shadow: 2px 2px 10px var(--shadow_color);
+}
+.menu {
+	display: flex;
+	flex-direction: column;
+}
+.stats_table {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 0.2em 1em;
+	margin: 3px;
+}
+</style>