website: Fix router to use relative navigation

Author: joaomariolago

website/src/components/Counter.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-row 
+    <v-row
       v-for="(section, index) in sections"
       :key="index"
     >

website/src/layouts/default/AppBar.vue

@@ -4,21 +4,22 @@
       BlueOS Store Apps
     </v-app-bar-title>
     <v-spacer></v-spacer>
-    <v-btn :to="buttonRoute">{{ buttonText }}</v-btn>
+    <v-btn @click="navigateTo">{{ buttonText }}</v-btn>
   </v-app-bar>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
+const router = useRouter()
 
-const buttonText = computed(() => {
-  return route.path === '/logs' ? 'Home' : 'Logs'
-})
+const navigateTo = () => {
+  router.push(route.path.endsWith('/logs') ? './' : './logs')
+}
 
-const buttonRoute = computed(() => {
-  return route.path === '/logs' ? '/' : '/logs'
+const buttonText = computed(() => {
+  return route.path.endsWith('/logs') ? 'Home' : 'Logs'
 })
 </script>

website/src/router/index.ts

@@ -1,25 +1,30 @@
 // Composables
 import { createRouter, createWebHistory } from 'vue-router'
+const DefaultLayout = () => import('@/layouts/default/Default.vue')
+
+const childRoutes = [
+  {
+    path: 'logs',
+    name: 'Logs',
+    component: () => import(/* webpackChunkName: "logs" */ '@/views/Logs.vue'),
+  },
+  {
+    path: '',
+    name: 'Home',
+    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+  },
+]
 
 const routes = [
   {
-    path: '/dist|BlueOS-Extensions-Repository|',
-    component: () => import('@/layouts/default/Default.vue'),
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
-      },
-      {
-        path: 'logs',
-        name: 'Logs',
-        component: () => import(/* webpackChunkName: "logs" */ '@/views/Logs.vue'),
-      },
-    ],
+    path: '/dist',
+    component: DefaultLayout,
+    children: childRoutes,
+  },
+  {
+    path: '/BlueOS-Extensions-Repository',
+    component: DefaultLayout,
+    children: childRoutes,
   },
 ]