Add initial logic for 'boards'

src/routes/+error.svelte

@@ -59,12 +59,14 @@
 		color: var(--color-title);
 		max-width: 300px;
 		margin-top: 5px;
-		margin-bottom: 30px;
+		margin-bottom: 20px;
 	}
 
 	.debug-info {
 		background: rgba(255, 255, 255, 0.05);
-		padding: 5px 12px;
+		padding: 5px 15px;
+		margin-top: 0;
+		margin-bottom: 20px;
 		border-radius: 4px;
 		font-size: 0.8rem;
 		opacity: 0.6;

src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
-	onMount(() => LOCATIONS.init());
+	onMount(() => LOCATIONS.init(fetch));
 
 	let { children } = $props();
 
@@ -23,9 +23,9 @@
 
 	const navItems = [
 		{ label: 'Home', path: '/', icon: IconHome },
-		{ label: 'PIS', path: '/pis', icon: IconDialpad },
-		{ label: 'Options', path: '/preferences', icon: IconSettings },
-		{ label: 'About', path: '/about', icon: IconHelp }
+		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
+		{ label: 'Options', path: '/preferences/', icon: IconSettings },
+		{ label: 'About', path: '/about/', icon: IconHelp }
 	];
 
 	let navWidth = $state(0);
@@ -83,7 +83,7 @@
 <nav bind:clientWidth={navWidth}>
 	<!-- Dynamic Nav Elements Here! -->
 	{#each visibleItems as item}
-		{@const isActive = activePath === item.path}
+		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 		<a
 			href={item.path}
 			class="nav-item"
@@ -115,7 +115,7 @@
 			></div>
 			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
 				{#each hiddenItems as item}
-					{@const isActive = activePath === item.path}
+					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 					<a
 						href={item.path}
 						class="menu-popover-item"

src/routes/+layout.ts

@@ -1,3 +1,4 @@
 export const prerender = true;
 export const trailingSlash = 'always';
 export const csr = true;
+export const ssr = false;

src/routes/board/+page.svelte

@@ -0,0 +1,15 @@
+<section>
+    Live board are not yet implemented on the server
+</section>
+
+<style>
+    section {
+        font-family: 'URW Gothic', sans-serif;
+        text-align: center;
+        font-size: 2rem;
+        width: 90%;
+        margin: auto;
+        padding-top: 25px;
+        max-width: 500px;
+    }
+</style>

src/routes/board/+page.ts

@@ -0,0 +1,37 @@
+import { LOCATIONS } from '$lib/locations-object.svelte';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ url }) => {
+    const locId = url.searchParams.get('loc');
+
+    if (!LOCATIONS.loaded) {
+        await LOCATIONS.init(fetch);
+    }
+
+    let title: string = "";
+
+    if (!locId) {
+        error(400, {
+            message: 'Location not provided',
+            owlCode: 'NO_LOCATION_IN_PATH',
+        });
+    }
+
+    if (locId) {
+        const location = LOCATIONS.find(locId);
+
+        if (location) {
+            title = location.n || location.t;
+        } else {
+            error(404, {
+                message: `Location (${locId}) not found`,
+                owlCode: 'INVALID_LOCATION_CODE',
+            });
+        }
+    }
+	return {
+		title,
+        location,
+	};
+};