🐛 Fixes the relative paths

app/src/lib/components/menu/Menu.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { page } from '$app/state';
+  import { page } from '$app/state'
-  import { useFeatureFlags } from '$lib/stores/featureFlags';
+  import { base } from '$app/paths'
-  import GithubButton from '../menu/GithubButton.svelte';
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
-  import LogoButton from '../menu/LogoButton.svelte';
+  import GithubButton from '../menu/GithubButton.svelte'
-  import MenuList from '../menu/MenuList.svelte';
+  import LogoButton from '../menu/LogoButton.svelte'
+  import MenuList from '../menu/MenuList.svelte'
   import {
     Connection,
     Settings,
@@ -20,42 +21,46 @@
     AP,
     Copyright,
     Metrics,
-    DNS,
+    DNS
-  } from '$lib/components/icons';
+  } from '$lib/components/icons'
-  import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
+  import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-  const features = useFeatureFlags();
+  const features = useFeatureFlags()
 
-  const appName = page.data.app_name;
+  const appName = page.data.app_name
 
-  const copyright = page.data.copyright;
+  const copyright = page.data.copyright
 
-  const github = { href: 'https://github.com/' + page.data.github, active: true };
+  const github = { href: 'https://github.com/' + page.data.github, active: true }
 
   type menuItem = {
-    title: string;
+    title: string
-    icon: ConstructorOfATypedSvelteComponent;
+    icon: ConstructorOfATypedSvelteComponent
-    href?: string;
+    href?: string
-    feature: boolean;
+    feature: boolean
-    active?: boolean;
+    active?: boolean
-    submenu?: menuItem[];
+    submenu?: menuItem[]
-  };
+  }
 
-  let menuItems = $state<menuItem[]>([]);
+  function withBase(path: string) {
+    return `${base}${path.startsWith('/') ? path : '/' + path}`
+  }
+
+  let menuItems = $state<menuItem[]>([])
 
   $effect(() => {
     menuItems = [
       {
         title: 'Connection',
         icon: WiFi,
-        href: '/connection',
+        href: withBase('/connection'),
-        feature: !PUBLIC_VITE_USE_HOST_NAME,
+        feature: !PUBLIC_VITE_USE_HOST_NAME
       },
       {
         title: 'Controller',
         icon: MdiController,
-        href: '/controller',
+        href: withBase('/controller'),
-        feature: true,
+        feature: true
       },
       {
         title: 'Peripherals',
@@ -65,28 +70,28 @@
           {
             title: 'I2C',
             icon: Connection,
-            href: '/peripherals/i2c',
+            href: withBase('/peripherals/i2c'),
-            feature: true,
+            feature: true
           },
           {
             title: 'Camera',
             icon: Camera,
-            href: '/peripherals/camera',
+            href: withBase('/peripherals/camera'),
-            feature: $features.camera,
+            feature: $features.camera
           },
           {
             title: 'Servo',
             icon: MotorOutline,
-            href: '/peripherals/servo',
+            href: withBase('/peripherals/servo'),
-            feature: true,
+            feature: true
           },
           {
             title: 'IMU',
             icon: Rotate3d,
-            href: '/peripherals/imu',
+            href: withBase('/peripherals/imu'),
-            feature: $features.imu || $features.mag || $features.bmp,
+            feature: $features.imu || $features.mag || $features.bmp
-          },
+          }
-        ],
+        ]
       },
       {
         title: 'WiFi',
@@ -96,22 +101,22 @@
           {
             title: 'WiFi Station',
             icon: Router,
-            href: '/wifi/sta',
+            href: withBase('/wifi/sta'),
-            feature: true,
+            feature: true
           },
           {
             title: 'Access Point',
             icon: AP,
-            href: '/wifi/ap',
+            href: withBase('/wifi/ap'),
-            feature: true,
+            feature: true
           },
           {
             title: 'mDNS',
             icon: DNS,
-            href: '/wifi/mdns',
+            href: withBase('/wifi/mdns'),
-            feature: true,
+            feature: true
-          },
+          }
-        ],
+        ]
       },
       {
         title: 'System',
@@ -121,52 +126,52 @@
           {
             title: 'System Status',
             icon: Health,
-            href: '/system/status',
+            href: withBase('/system/status'),
-            feature: true,
+            feature: true
           },
           {
             title: 'File System',
             icon: Folder,
-            href: '/system/filesystem',
+            href: withBase('/system/filesystem'),
-            feature: true,
+            feature: true
           },
           {
             title: 'System Metrics',
             icon: Metrics,
-            href: '/system/metrics',
+            href: withBase('/system/metrics'),
-            feature: true,
+            feature: true
           },
           {
             title: 'Firmware Update',
             icon: Update,
-            href: '/system/update',
+            href: withBase('/system/update'),
-            feature: $features.ota || $features.upload_firmware || $features.download_firmware,
+            feature: $features.ota || $features.upload_firmware || $features.download_firmware
-          },
+          }
-        ],
+        ]
-      },
+      }
-    ] as menuItem[];
+    ] as menuItem[]
-  });
+  })
 
-  const { menuClicked } = $props();
+  const { menuClicked } = $props()
 
   function setActiveMenuItem(targetTitle: string) {
     menuItems.forEach(item => {
-      item.active = item.title === targetTitle;
+      item.active = item.title === targetTitle
       item.submenu?.forEach(subItem => {
-        subItem.active = subItem.title === targetTitle;
+        subItem.active = subItem.title === targetTitle
-      });
+      })
-    });
+    })
-    menuItems = menuItems;
+    menuItems = menuItems
-    menuClicked();
+    menuClicked()
   }
 
   $effect(() => {
-    setActiveMenuItem(page.data.title);
+    setActiveMenuItem(page.data.title)
-  });
+  })
 
   const updateMenu = (event: any) => {
-    setActiveMenuItem(event.details);
+    setActiveMenuItem(event.details)
-  };
+  }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">

app/src/lib/stores/featureFlags.ts

@@ -3,6 +3,7 @@ import { notifications } from '$lib/components/toasts/notifications'
 import Kinematic from '$lib/kinematic'
 import { persistentStore } from '$lib/utilities'
 import { derived, type Writable } from 'svelte/store'
+import { base } from '$app/paths'
 
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
@@ -23,8 +24,8 @@ export function useFeatureFlags() {
 
 export const variants = {
   SPOTMICRO_ESP32: {
-    model: '/spot_micro.urdf.xacro',
+    model: `${base}/spot_micro.urdf.xacro`,
-    stl: '/stl.zip',
+    stl: `${base}/stl.zip`,
     kinematics: {
       l1: 60.5 / 100,
       l2: 10 / 100,
@@ -35,8 +36,8 @@ export const variants = {
     }
   },
   SPOTMICRO_YERTLE: {
-    model: '/yertle.URDF',
+    model: `${base}/yertle.URDF`,
-    stl: '/URDF.zip',
+    stl: `${base}/URDF.zip`,
     kinematics: {
       l1: 35 / 100,
       l2: 0 / 100,