From 98fea9aa3ae2c37e1f682809d288fac2df6dd80b Mon Sep 17 00:00:00 2001
From: ditatompel <ditatompel@gmail.com>
Date: Wed, 8 May 2024 01:22:37 +0700
Subject: [PATCH] Fix and optimize navigation

---
 .../navigation/AdminMobileDrawer.svelte       | 15 ++++------
 .../components/navigation/AdminSidebar.svelte |  4 +--
 .../lib/components/navigation/MainNav.svelte  | 30 ++++++++-----------
 .../components/navigation/MobileDrawer.svelte | 26 ++++++++--------
 .../src/lib/components/navigation/navs.js     |  7 ++++-
 5 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/navigation/AdminMobileDrawer.svelte b/frontend/src/lib/components/navigation/AdminMobileDrawer.svelte
index 97e3b41..5c2ed6b 100644
--- a/frontend/src/lib/components/navigation/AdminMobileDrawer.svelte
+++ b/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();
-
-	function drawerClose() {
-		drawerStore.close();
-	}
-
-	$: classesActive = (/** @type {string} */ href) =>
+	$: style = (/** @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>
diff --git a/frontend/src/lib/components/navigation/AdminSidebar.svelte b/frontend/src/lib/components/navigation/AdminSidebar.svelte
index ca761f0..107bb1f 100644
--- a/frontend/src/lib/components/navigation/AdminSidebar.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/navigation/MainNav.svelte b/frontend/src/lib/components/navigation/MainNav.svelte
index bfd13fd..4570968 100644
--- a/frontend/src/lib/components/navigation/MainNav.svelte
+++ b/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>
-				<li>
-					<a
-						href="/remote-nodes"
-						class={$page.url.pathname.startsWith('/remote-nodes') ? '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
-					>
-				</li>
+				{#each navs as nav}
+					<li>
+						<a
+							href={nav.path}
+							class={$page.url.pathname.startsWith(nav.path) ? 'active' : 'nav-link'}
+						>
+							{nav.name}
+						</a>
+					</li>
+				{/each}
 			</ul>
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/navigation/MobileDrawer.svelte b/frontend/src/lib/components/navigation/MobileDrawer.svelte
index 46dbae2..fc832aa 100644
--- a/frontend/src/lib/components/navigation/MobileDrawer.svelte
+++ b/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();
-
-	function drawerClose() {
-		drawerStore.close();
-	}
-
-	$: classesActive = (/** @type {string} */ href) =>
+	$: classes = (/** @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}
-				>Home</a
+			<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>
-		<li><a href="/tools" class={classesActive('/tools')} on:click={drawerClose}>Tools</a></li>
-    <li><a href="/asn" class={classesActive('/asn')} on:click={drawerClose}>ASN</a></li>
-		<li><a href="/proxy" class={classesActive('/proxy')} on:click={drawerClose}>Proxy</a></li>
-		<li><a href="/monero" class={classesActive('/monero')} on:click={drawerClose}>Monero</a></li>
+		{#each navs as nav}
+			<li>
+				<a href={nav.path} class={classes(nav.path)} on:click={() => drawerStore.close()}
+					>{nav.name}</a
+				>
+			</li>
+		{/each}
 	</ul>
 </nav>
diff --git a/frontend/src/lib/components/navigation/navs.js b/frontend/src/lib/components/navigation/navs.js
index 1837c8b..1d21099 100644
--- a/frontend/src/lib/components/navigation/navs.js
+++ b/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/' }
+];