dynamic sidebar elements based on routes on disk

src/lib/components/Sidebar.svelte

@@ -1,38 +1,16 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { derived } from 'svelte/store';
+	import { allRoutes } from '$lib/remote/filesystem.remote.ts';
 
 	let mobileNavOpen = $state(false);
-	const pages = [
-		{
-			name: 'Home',
-			path: '/'
-		},
-		{
-			name: 'Sites',
-			path: '/sites'
-		},
-		{
-			name: 'Servers',
-			path: '/servers'
-		},
-		{
-			name: 'Printer',
-			path: '/printer'
-		},
-		{
-			name: 'Network',
-			path: '/network'
-		},
-		{
-			name: 'Cluster',
-			path: '/cluster'
-		},
-		{
-			name: 'Health',
-			path: '/health'
+	let pages = $state([])
+
+	async function resolvePages() {
+		pages = await allRoutes()
 	}
-	];
+
+	resolvePages()
 
 	const activePage = derived(page, ($page) => $page.url.pathname);
 	const toggle = () => {

src/lib/components/navigation/Tabs.svelte

@@ -59,6 +59,5 @@
 		display: flex;
 		flex-direction: column;
 		margin-bottom: 1.5rem;
-		z-index: 100;
 	}
 </style>

src/lib/remote/filesystem.remote.ts

@@ -0,0 +1,23 @@
+import { prerender } from '$app/server';
+
+export const allRoutes = prerender(() => {
+	const modules = import.meta.glob('/src/routes/**/+page.svelte');
+	const routes = Object.keys(modules).map((path) => {
+		console.log(path);
+		// Remove '/src/routes' prefix and '+page.svelte' suffix
+		let route = path.replace('/src/routes', '').replace('/+page.svelte', '');
+		// Handle the root route
+
+		route = route.toString().split('/')[1];
+		return route;
+	});
+
+	const allRoute = [...new Set(routes)].map((r: string) => {
+		return {
+			name: r?.length > 1 ? r[0].toUpperCase() + r.slice(1, r.length) : r,
+			path: '/' + r
+		};
+	});
+
+	return [{name: 'Home', path: '/'}, ...allRoute].filter(r => r.name);
+});