Convert multiple pages into SPA

svelte/src/wrap/MainMenu.svelte

@@ -0,0 +1,166 @@
+<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>