fix: navigation

src/lib/menu/menu-item.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { urlStore } from '$lib/utils/url-store';
 
 	export let href: string;
 	export let label: string;
 
-	$: active = href === $page.url.pathname;
+	$: pathname = $urlStore || $page.url.pathname;
+	$: active = href === pathname;
 </script>
 
 <a

src/lib/utils/url-store.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const urlStore = writable('');

src/routes/+layout.svelte

@@ -7,9 +7,13 @@
 
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { urlStore } from '$lib/utils/url-store';
 
 	/** @type {import('./$types').LayoutData} */
 	export let data: PageData;
+
+	page.subscribe((val) => urlStore.set(val.url.pathname));
 </script>
 
 <div class="h-16 bg-stripe-200 fixed inset-x-0 sm:hidden">

src/routes/[...page]/+page.svelte

@@ -3,6 +3,7 @@
 	import Markdown from '$lib/components/markdown/markdown.svelte';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	import { urlStore } from '$lib/utils/url-store';
 
 	/** @type {import('./$types').PageData} */
 	export let data: PageData;
@@ -36,7 +37,11 @@
 
 		const id = menuItems[values.findIndex((y) => y === Math.min(...values))].id;
 
-		window.history.pushState({}, '', window.location.origin + (id ? '/topics/' + id : ''));
+		const newPathname = id ? '/topics/' + id : '/';
+		if (newPathname !== window.location.pathname) {
+			window.history.pushState({}, '', window.location.origin + newPathname);
+			urlStore.set(newPathname);
+		}
 	};
 
 	onMount(() => {