feat: SPA router

src/ui/package.json

@@ -24,6 +24,7 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "svelte-spa-router": "^3.2.0"
   }
 }

src/ui/public/global.css

@@ -3,6 +3,7 @@
 * {
   margin: 0;
   padding: 0;
+  text-decoration: none;
 }
 
 body {

src/ui/src/components/Main.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
-  import Resources from './resources/Resources.svelte';
+  import Router from 'svelte-spa-router';
+  import Resources from './menu/NavMenu.svelte';
+  import Home from './routes/Home.svelte';
+  import ResourceData from './routes/ResourceData.svelte';
+
+  const routes = {
+    '/': Home,
+    '/*': ResourceData,
+  };
 </script>
 
 <div class="container">
   <Resources />
   <div class="content-wrapper">
-    <div class="content-container">Some Data here</div>
+    <div class="content-container">
+      <Router {routes} />
+    </div>
   </div>
 </div>
 
@@ -29,8 +39,8 @@
   }
 
   .content-container {
-    width: 80vh;
-    height: 55vh;
+    width: 85%;
+    height: 85%;
     background-color: #34495e;
     border-radius: 0.25vh;
     color: white;

src/ui/src/components/resources/Resources.svelte → src/ui/src/components/menu/NavMenu.svelte

@@ -1,13 +1,16 @@
-<script>
+<script lang="ts">
   const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
 </script>
 
 <div class="container">
+  <a href="#/"><div class="home-header">Home</div></a>
   {#each executingResources as resource}
     <div class="resource-wrapper">
-      <div class="resource">
-        {resource}
-      </div>
+      <a href={`#/${resource}`}>
+        <div class="resource">
+          {resource}
+        </div>
+      </a>
     </div>
   {/each}
 </div>
@@ -27,6 +30,13 @@
     user-select: none;
   }
 
+  .home-header {
+    font-size: 2.2vh;
+    text-align: left;
+    padding: 1vh;
+    border-bottom: 0.25vh solid grey;
+  }
+
   .resource-wrapper {
     padding: 1vh;
   }
@@ -39,7 +49,12 @@
     display: block;
   }
 
-  .resource-wrapper:hover {
+  .resource-wrapper:hover,
+  .home-header:hover {
     background-color: grey;
   }
+
+  a:visited {
+    color: white;
+  }
 </style>

src/ui/src/components/routes/Home.svelte

@@ -0,0 +1 @@
+<div>Some data here</div>

src/ui/src/components/routes/ResourceData.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let params: { wild: string };
+</script>
+
+<div>{params.wild}</div>

src/ui/src/store/stores.ts

@@ -1,3 +1,3 @@
 import { writable } from "svelte/store";
 
-export const visibility = writable(false);
+export const visibility = writable(false);