Fix and optimize navigation

frontend/src/lib/components/navigation/AdminMobileDrawer.svelte

@@ -1,23 +1,20 @@
 <script>
 	import { page } from '$app/stores';
-	import { navs } from './navs';
+	import { adminNavs } from './navs';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 
 	const drawerStore = getDrawerStore();
-
+	$: style = (/** @type {string} */ href) =>
-	function drawerClose() {
-		drawerStore.close();
-	}
-
-	$: classesActive = (/** @type {string} */ href) =>
 		$page.url.pathname.startsWith(href) ? 'bg-primary-500' : '';
 </script>
 
 <nav class="list-nav p-4">
 	<ul>
-		{#each navs as nav}
+		{#each adminNavs as nav}
 			<li>
-				<a href={nav.path} class={classesActive(nav.path)} on:click={drawerClose}>{nav.name}</a>
+				<a href={nav.path} class={style(nav.path)} on:click={() => drawerStore.close()}
+					>{nav.name}</a
+				>
 			</li>
 		{/each}
 	</ul>

frontend/src/lib/components/navigation/AdminSidebar.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import { navs } from './navs';
+	import { adminNavs } from './navs';
 </script>
 
 <aside
@@ -10,7 +10,7 @@
 >
 	<div class="h-full overflow-y-auto px-3 pb-4">
 		<ul class="space-y-2 font-medium list-none" data-sveltekit-preload-data="false">
-			{#each navs as nav}
+			{#each adminNavs as nav}
 				<li>
 					<a
 						href={nav.path}

frontend/src/lib/components/navigation/MainNav.svelte

@@ -1,12 +1,9 @@
 <script>
 	import { page } from '$app/stores';
+	import { navs } from './navs';
 	import { LightSwitch, getDrawerStore } from '@skeletonlabs/skeleton';
 
 	const drawerStore = getDrawerStore();
-
-	function drawerOpen() {
-		drawerStore.open({});
-	}
 </script>
 
 <nav class="fixed w-full z-20 top-0 start-0 bg-surface-100-800-token shadow-2xl">
@@ -22,7 +19,7 @@
 			<button
 				class="btn btn-sm mr-4 md:hidden"
 				aria-label="Mobile Drawer Button"
-				on:click={drawerOpen}
+				on:click={() => drawerStore.open({})}
 			>
 				<span>
 					<svg viewBox="0 0 100 80" class="fill-token h-4 w-4">
@@ -44,19 +41,16 @@
 						aria-current={$page.url.pathname === '/' ? 'page' : undefined}>Home</a
 					>
 				</li>
+				{#each navs as nav}
 					<li>
 						<a
-						href="/remote-nodes"
+							href={nav.path}
-						class={$page.url.pathname.startsWith('/remote-nodes') ? 'active' : 'nav-link'}
+							class={$page.url.pathname.startsWith(nav.path) ? 'active' : 'nav-link'}
-						>Remote Nodes</a
-					>
-				</li>
-				<li>
-					<a
-						href="/add-node"
-						class={$page.url.pathname.startsWith('/add-node') ? 'active' : 'nav-link'}>Add Node</a
 						>
+							{nav.name}
+						</a>
 					</li>
+				{/each}
 			</ul>
 		</div>
 	</div>

frontend/src/lib/components/navigation/MobileDrawer.svelte

@@ -1,28 +1,28 @@
 <script>
 	import { page } from '$app/stores';
+	import { navs } from './navs';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 
 	const drawerStore = getDrawerStore();
-
+	$: classes = (/** @type {string} */ href) =>
-	function drawerClose() {
-		drawerStore.close();
-	}
-
-	$: classesActive = (/** @type {string} */ href) =>
 		$page.url.pathname.startsWith(href) ? 'bg-primary-500' : '';
 </script>
 
 <nav class="list-nav p-4">
 	<ul>
 		<li>
-			<a href="/" class={$page.url.pathname === '/' ? 'bg-primary-500' : ''} on:click={drawerClose}
+			<a
-				>Home</a
+				href="/"
+				class={$page.url.pathname === '/' ? 'bg-primary-500' : ''}
+				on:click={() => drawerStore.close()}>Home</a
 			>
 		</li>
-		<li><a href="/dib" class={classesActive('/dib')} on:click={drawerClose}>Data</a></li>
+		{#each navs as nav}
-		<li><a href="/tools" class={classesActive('/tools')} on:click={drawerClose}>Tools</a></li>
+			<li>
-    <li><a href="/asn" class={classesActive('/asn')} on:click={drawerClose}>ASN</a></li>
+				<a href={nav.path} class={classes(nav.path)} on:click={() => drawerStore.close()}
-		<li><a href="/proxy" class={classesActive('/proxy')} on:click={drawerClose}>Proxy</a></li>
+					>{nav.name}</a
-		<li><a href="/monero" class={classesActive('/monero')} on:click={drawerClose}>Monero</a></li>
+				>
+			</li>
+		{/each}
 	</ul>
 </nav>

frontend/src/lib/components/navigation/navs.js

@@ -1,5 +1,10 @@
-export const navs = [
+export const adminNavs = [
 	{ name: 'Dashboard', path: '/app/dashboard/' },
 	{ name: 'Prober', path: '/app/prober/' },
 	{ name: 'Crons', path: '/app/crons/' }
 ];
+
+export const navs = [
+	{ name: 'Remote Nodes', path: '/remote-nodes/' },
+	{ name: 'Add Node', path: '/add-node/' }
+];