Convert multiple pages into SPA

svelte/src/util/TabMenu.svelte

@@ -8,20 +8,15 @@ export type Tab = {
 	hide_background?: boolean,
 	hide_frame?: boolean,
 	subpages?: Tab[],
-}
+};
 </script>
 <script lang="ts">
 import { onMount, type ComponentType } from "svelte";
-import Footer from "layout/Footer.svelte";
+import { current_page_store } from "wrap/RouterStore";
 
 export let title = ""
 export let pages: Tab[] = []
 
-const navigate = (page: Tab) => {
-	window.history.pushState({}, window.document.title, page.path)
-	get_page()
-}
-
 const get_page = () => {
 	current_page = null
 	current_subpage = null
@@ -52,7 +47,7 @@ const get_page = () => {
 	}
 
 	title = current_subpage === null ? current_page.title : current_subpage.title
-	window.document.title = title+" ~ pixeldrain"
+	window.document.title = title+" / FNX"
 
 	console.debug("Page", current_page)
 	console.debug("Subpage", current_subpage)
@@ -63,22 +58,21 @@ const get_page = () => {
 let current_page: Tab = null
 let current_subpage: Tab = null
 
-onMount(() => get_page())
+onMount(() => {
+	get_page()
+	return current_page_store.subscribe(get_page)
+})
 </script>
 
-<svelte:window on:popstate={get_page} />
-
 {#if current_page !== null && current_page.hide_frame !== true}
 	<header>
-		<h1>{title}</h1>
-
 		<div class="tab_bar">
 			{#each pages as page}
 				{#if !page.hidden}
 					<a class="button"
 						href="{page.path}"
 						class:button_highlight={current_page && page.path === current_page.path}
-						on:click|preventDefault={() => {navigate(page)}}>
+					>
 						<i class="icon">{page.icon}</i>
 						<span>{page.title}</span>
 					</a>
@@ -97,7 +91,7 @@ onMount(() => get_page())
 						<a class="button"
 							href="{page.path}"
 							class:button_highlight={current_subpage && page.path === current_subpage.path}
-							on:click|preventDefault={() => {navigate(page)}}>
+						>
 							<i class="icon">{page.icon}</i>
 							<span>{page.title}</span>
 						</a>
@@ -114,13 +108,9 @@ onMount(() => get_page())
 	</div>
 {/if}
 
-{#if current_page !== null && current_page.hide_frame !== true}
-	<Footer/>
-{/if}
-
 <style>
 .submenu {
-	border-bottom: 2px solid var(--separator);
+	border-bottom: 1px solid var(--separator);
 }
 .tab_bar > .button {
 	flex-direction: column;