Update styles

svelte/src/layout/Footer.svelte

@@ -0,0 +1,48 @@
+<script>
+    import Github from "../icons/Github.svelte";
+    import Mastodon from "../icons/Mastodon.svelte";
+import Patreon from "../icons/Patreon.svelte";
+import Reddit from "../icons/Reddit.svelte";
+import Twitter from "../icons/Twitter.svelte";
+</script>
+
+<footer>
+	<div class="footer_content">
+		<div style="display: inline-block; margin: 0 8px 0 8px;">
+			Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
+		</div>
+		<div style="display: inline-block; margin: 0 8px 0 8px;">
+			(
+			<a href="https://www.patreon.com/pixeldrain" target="_blank">
+				<Patreon style="color: var(--body_text_color);"/> Patreon
+			</a> |
+			<a href="https://twitter.com/Fornax96" target="_blank">
+				<Twitter style="color: var(--body_text_color);"/> Twitter
+			</a> |
+			<a href="https://reddit.com/r/pixeldrain" target="_blank">
+				<Reddit style="color: var(--body_text_color);"/> Reddit
+			</a> |
+			<a href="https://github.com/Fornaxian" target="_blank">
+				<Github style="color: var(--body_text_color);"/> GitHub
+			</a> |
+			<a href="https://mastodon.social/web/@fornax" target="_blank">
+				<Mastodon style="color: var(--body_text_color);"/> Mastodon
+			</a>
+			)
+		</div>
+		<br/>
+		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
+			page rendered by {window.server_hostname}
+		</span>
+	</div>
+</footer>
+
+<style>
+.footer_content {
+	background-color: var(--body_background);
+	color: var(--body_text_color);
+	display: inline-block;
+	border-radius: 8px;
+	margin: 160px 0 60px 0;
+}
+</style>

svelte/src/layout/Menu.svelte

@@ -0,0 +1,84 @@
+<script>
+let nav;
+
+export const toggle = () => {
+	var body = document.getElementById("page_body");
+	if (nav.offsetLeft === 0) {
+		// Menu is visible, hide it
+		nav.style.left = -nav.offsetWidth + "px";
+		body.style.marginLeft = "0";
+	} else {
+		// Menu is hidden, show it
+		nav.style.left = "0";
+		body.style.marginLeft = nav.offsetWidth + "px";
+	}
+}
+export const reset = () => {
+	nav.style.left = "";
+	document.getElementById("page_body").style.marginLeft = "";
+}
+</script>
+
+<button id="button_toggle_navigation" class="button_toggle_navigation" on:click={toggle}>☰</button>
+<nav bind:this={nav} id="page_navigation" class="page_navigation">
+	<a href="/#">Home</a>
+	<a href="/#prepaid">For Creators</a>
+	<hr />
+	{#if window.user !== ""}
+		<a href="/user">{window.user.username}</a>
+		<a href="/user/filemanager#files">My Files</a>
+		<a href="/user/filemanager#lists">My Albums</a>
+		{#if window.user.is_admin}
+			<a href="/user/buckets">Buckets</a>
+			<a href="/admin">Admin Panel</a>
+		{/if}
+		<a href="/logout">Log out</a>
+	{:else}
+		<a href="/login">Login</a>
+		<a href="/register">Register</a>
+		<a href="/history">Upload History</a>
+	{/if}
+	<hr />
+	<a href="/about">About</a>
+	<a href="/apps">Apps</a>
+	<a href="/appearance">Theme</a>
+	<a href="/api">API</a>
+	<a href="/acknowledgements">Acknowledgements</a>
+	<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
+</nav>
+
+<style>
+.button_toggle_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	padding: 10px 20px 15px 10px;
+	font-size: 2em;
+	margin: 0;
+	background: #3f3f3f;
+	background: var(--input_background);
+	border-radius: 0;
+	border-bottom-right-radius: 90%;
+}
+
+.button_toggle_navigation:active {
+	padding: 15px 15px 10px 15px;
+}
+
+.page_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	background: var(--navigation_background);
+	width: 17em;
+	height: 100%;
+	left: 0;
+	float: left;
+	padding: 20px 10px 10px 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	text-align: left;
+	transition: left 0.5s;
+}
+</style>