add account page

src/lib/components/navigation/sidemenu.svelte

@@ -34,12 +34,15 @@
 		];
 
 		if (context.account) {
+			items.splice(1, 0, {
+				href: `/${network}/account`,
+				text: 'My Account'
+			});
 			items.splice(1, 0, {
 				href: `/${network}/account/${context.account.name}`,
 				text: 'My Account'
 			});
 		}
-
 		return items;
 	});
 

src/routes/[network]/(account)/account/+layout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Stack } from '$lib/components/layout';
+	import PillGroup from '$lib/components/navigation/pillgroup.svelte';
+
+    const { data, children } = $props();
+
+	const tabOptions = $derived.by(() => {
+		const network = String(data.network);
+		return [
+			{ href: `/${network}/account`, text: 'Overview' },
+			{ href: `/${network}/account/activity`, text: 'Activity' },
+			{ href: `/${network}/account/balances`, text: 'Balances' },
+			{ href: `/${network}/account/chaindata`, text: 'Data' }
+		];
+	});
+
+	let currentTab = $derived($page.url.pathname.split('/').slice(2)[3]);
+
+	// Derive the active state of each destination
+	let options = $derived(
+		tabOptions.map((option) => ({
+			...option,
+			active: option.href.split('/').slice(2)[2] === currentTab
+		}))
+	);
+</script>
+
+<header class="layout-stack gap-6">
+	<Stack class="gap-2">
+		<h1 class="h2 leading-none text-neutral-200/60">Account</h1>
+	</Stack>
+	<PillGroup {options} class="mb-6" />
+</header>
+
+{@render children()}

src/routes/[network]/(account)/account/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Overview</div>

src/routes/[network]/(account)/account/activity/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Activity</div>

src/routes/[network]/(account)/account/balances/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Blances</div>

src/routes/[network]/(account)/account/chaindata/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<div>Data</div>