fnx_web/svelte/src/wrap/MainMenu.svelte

<script lang="ts">
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { user } from "lib/UserStore";
import Euro from "util/Euro.svelte";
import { formatDataVolume } from "util/Formatting";
import Router from "wrap/Router.svelte";
import Bookmarks from "./Bookmarks.svelte";
import { onMount } from "svelte";
import { fs_get_node } from "lib/FilesystemAPI";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";

onMount(async () => {
	await loading_run(async () => {
		const root = await fs_get_node("/me")
		document.documentElement.style = css_from_path(root.path)
	})
})
</script>

<div class="nav_container">
	<nav class="nav">
		{#if $user.username !== undefined && $user.username !== ""}
			<div class="username hide_small">
				{$user.username}
			</div>
			<div class="stats_table hide_small">
				<div>Subscription</div>
				<div>{$user.subscription.name}</div>

				{#if $user.subscription.type === "prepaid"}
					<div>Credit</div>
					<div><Euro amount={$user.balance_micro_eur}/></div>
				{/if}

				<div>Storage used</div>
				<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
				<div>Transfer used</div>
				<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
			</div>
			<div class="separator hide_small"></div>
		{/if}

		<a class="button" href="/" use:highlight_current_page>
			<i class="icon">home</i>
			<span class="hide_small">Home</span>
		</a>
		{#if !$user.username}
			<a class="button" href="/login" use:highlight_current_page>
				<i class="icon">login</i>
				<span class="hide_small">Login</span>
			</a>
			<a class="button" href="/register" use:highlight_current_page>
				<i class="icon">how_to_reg</i>
				<span class="hide_small">Register</span>
			</a>
		{:else}
			<a class="button" href="/user" use:highlight_current_page>
				<i class="icon">dashboard</i>
				<span class="hide_small">Dashboard</span>
			</a>
			<a class="button" href="/d/me" use:highlight_current_page>
				<i class="icon">folder</i>
				<span class="hide_small">Filesystem</span>
			</a>
			{#if $user.is_admin}
				<a class="button" href="/admin" use:highlight_current_page>
					<i class="icon">admin_panel_settings</i>
					<span class="hide_small">Admin Panel</span>
				</a>
			{/if}
		{/if}
		<a class="button" href="/speedtest" use:highlight_current_page>
			<i class="icon">speed</i>
			<span class="hide_small">Speedtest</span>
		</a>
		<a class="button" href="/appearance" use:highlight_current_page>
			<i class="icon">palette</i>
			<span class="hide_small">Themes</span>
		</a>

		<div class="separator hide_small"></div>
		<Bookmarks/>
	</nav>
</div>

<div class="page">
	<Router/>
</div>


{#if $loading_store !== 0}
	<div class="spinner">
		<Spinner/>
	</div>
{/if}

<style>
:global(body) {
	display: flex;
	flex-direction: row;

	color: var(--body_text_color);
	background-image: var(--background_image);
	background-color: var(--background_pattern_color);
	background-size: var(--background_image_size, initial);
	background-position: var(--background_image_position, initial);
	background-repeat: var(--background_image_repeat, repeat);
	background-attachment: fixed;
}
.nav_container {
	flex: 0 0 auto;
	border-right: 1px solid var(--separator);
	background: var(--shaded_background);
	backdrop-filter: blur(4px);
}
.nav {
	display: flex;
	flex-direction: column;
	max-width: 15em;
	position: sticky;
	top: 0;

}
.nav > .button {
	background: none;
	box-shadow: none;
}
.page {
	flex: 1 1 auto;
	overflow-x: hidden;
	max-width: 100%;
}

.separator {
	height: 1px;
	margin: 2px 0;
	width: 100%;
	background-color: var(--separator);
}
.username {
	text-align: center;
	margin: 3px;
}
.stats_table {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.2em 1em;
	margin: 3px;
}

@media(max-width: 1000px) {
	.hide_small {
		display: none;
	}
}

.spinner {
	position: fixed;
	top: 10px;
	right: 10px;
	height: 120px;
	width: 120px;
}
</style>