fnx_web/svelte/src/user_home/Router.svelte

<script>
import { onMount } from "svelte";
import Home from "./Home.svelte";
import AccountSettings from "./AccountSettings.svelte";
import APIKeys from "./APIKeys.svelte";

let page = ""

let navigate = (path, title) => {
	page = path
	window.document.title = title+" ~ pixeldrain"
	window.history.pushState(
		{}, window.document.title, "/user/"+path
	)
}

onMount(() => {
	let newpage = window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1)
	if (newpage === "user") {
		newpage = ""
	}
	page = newpage
})
</script>

<div>
	<a class="button tab"
		href="/user"
		class:button_highlight={page === ""}
		on:click|preventDefault={() => {navigate("", "My home")}}>
		<i class="icon">home</i>
		My home
	</a>
	<a class="button tab"
		href="/user/settings"
		class:button_highlight={page === "settings"}
		on:click|preventDefault={() => {navigate("settings", "Account settings")}}>
		<i class="icon">settings</i>
		Account settings
	</a>
	<a class="button tab"
		href="/user/api_keys"
		class:button_highlight={page === "api_keys"}
		on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
		<i class="icon">vpn_key</i>
		API keys
	</a>
	<hr/>

	{#if page === ""}
	<Home></Home>
	{:else if page === "settings"}
	<AccountSettings></AccountSettings>
	{:else if page === "api_keys"}
	<APIKeys></APIKeys>
	{/if}
</div>

<style>
</style>