Add routed dashboard layout with sidebar

### Motivation
- Provide a multi-tab dashboard layout so users can navigate between logical sections (Dashboard, Players, Graphics, Settings, About) via a persistent sidebar.
- Integrate `vue-router` to manage in-app navigation inside the Quasar layout for a cleaner, scalable dashboard structure.

### Description
- Added `vue-router` as a dev dependency and created `src/dashboard/example/router.ts` with routes for the five views (`/`, `/players`, `/graphics`, `/settings`, `/about`).
- Replaced the example dashboard UI with a Quasar `QLayout` in `src/dashboard/example/main.vue` that includes a left `QDrawer` sidebar and a `RouterView` outlet, and wired the app to the router in `src/dashboard/example/main.ts`.
- Added simple stub views for each tab under `src/dashboard/example/views/` (`Dashboard.vue`, `Players.vue`, `Graphics.vue`, `Settings.vue`, `About.vue`).
- Adjusted `src/dashboard/template.html` to remove the default NodeCG body margin (`margin: 0`) so the layout can occupy the full panel area.

### Testing
- Ran `npm install` which completed and added the new package with audit warnings about vulnerabilities reported. (succeeded)
- Started the dev server with `npx vite` which reported the inputs and served the bundle at `http://localhost:4173/bundles/scoreko-dev/` and `vue-tsc` reported `Found 0 errors` while watching. (succeeded)
- Attempted a Playwright screenshot run to capture the dashboard UI, but the Chromium process crashed (`TargetClosedError` / SIGSEGV) so no screenshot was produced. (failed)

------
[Codex Task](https://chatgpt.com/codex/tasks/task_e_69876e97329c832a8af7179a9175d88b)

package-lock.json

@@ -32,6 +32,7 @@
         "vite-plugin-checker": "^0.11.0",
         "vite-plugin-nodecg": "^2.1.0",
         "vue": "^3.5.22",
+        "vue-router": "^4.5.0",
         "vue-tsc": "^3.1.2"
       }
     },
@@ -84,7 +85,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -3309,7 +3309,6 @@
       "integrity": "sha512-LuIQOcb6UmnF7C1PCFmEU1u2hmiHL43fgFQX67sN3H4Z+0Yk0Neo++mFsBjhOAuLzvlQeqAAkeDOZrJs9rzumQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^5.0.0",
@@ -3390,7 +3389,6 @@
       "integrity": "sha512-Bo45YKIjnmFtv6I1TuC8AaHBbqXtIo+Om5fE4QiU1Tj8QR/qt+8O3BAtOimG5IFmwaWiPmB3Mv3jtYzBA4Us2A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3526,7 +3524,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -3870,7 +3867,6 @@
       "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rolldown/pluginutils": "1.0.0-beta.29"
       },
@@ -3965,6 +3961,13 @@
         "@vue/shared": "3.5.22"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/eslint-config-typescript": {
       "version": "14.6.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.6.0.tgz",
@@ -4146,7 +4149,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4459,7 +4461,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "bindings": "^1.5.0",
         "prebuild-install": "^7.1.1"
@@ -4607,7 +4608,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -5870,7 +5870,6 @@
       "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5931,7 +5930,6 @@
       "integrity": "sha512-SbR9ZBUFKgvWAbq3RrdCtWaW0IKm6wwUiApxf3BVTNfqUIo4IQQmreMg2iHFJJ6C/0wss3LXURBJ1OwS/MhFcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
@@ -8315,7 +8313,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9310,7 +9307,6 @@
       "integrity": "sha512-5ItDSsNjqBVRrC7SqcdvT1F5mghVyJ/KmaWNwnaT5mM91a7gWpT/d7wTCIFxxDbWLZdkHKI+cpdudEqnfcSw9A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 10.18.1",
         "npm": ">= 6.13.4",
@@ -9703,7 +9699,6 @@
       "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
         "buffer-builder": "^0.2.0",
@@ -10925,7 +10920,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11329,7 +11323,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11577,7 +11570,6 @@
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -11766,7 +11758,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11787,7 +11778,6 @@
       "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.22",
         "@vue/compiler-sfc": "3.5.22",
@@ -11841,13 +11831,28 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.2.tgz",
       "integrity": "sha512-3fd4DY0rFczs5f+VB3OhcLU83V6+3Puj2yLBe0Ak65k7ERk+STVNKaOAi0EBo6Lc15UiJB6LzU6Mxy4+h/pKew==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@volar/typescript": "2.4.23",
         "@vue/language-core": "3.1.2"

package.json

@@ -46,6 +46,7 @@
     "vite-plugin-checker": "^0.11.0",
     "vite-plugin-nodecg": "^2.1.0",
     "vue": "^3.5.22",
+    "vue-router": "^4.5.0",
     "vue-tsc": "^3.1.2"
   },
   "pnpm": {

src/dashboard/example/main.ts

@@ -5,10 +5,12 @@ import { Dark, Quasar } from 'quasar';
 import 'quasar/src/css/index.sass';
 import { createApp } from 'vue';
 import App from './main.vue';
+import router from './router';
 
 const app = createApp(App);
 const head = createHead();
 app.use(Quasar);
 app.use(head);
+app.use(router);
 app.mount('#app');
 Dark.set(true);

src/dashboard/example/main.vue

@@ -1,32 +1,60 @@
 <script setup lang="ts">
-import { useHead } from '@unhead/vue';
+import { computed } from 'vue';
-import { ref } from 'vue';
+import { useRoute } from 'vue-router';
-import { exampleReplicant } from '../../browser_shared/replicants';
-import type { ExampleType } from '../../types';
 
-useHead({ title: 'example' }); // set the title of this page
+const route = useRoute();
-const text = ref('Example');
 
-// Example code: accessing normal types.
+const menuItems = [
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { label: 'Dashboard', to: '/', icon: 'dashboard' },
-const exampleType: ExampleType = { exampleProperty: 'exampleString' };
+  { label: 'Players', to: '/players', icon: 'groups' },
+  { label: 'Graphics', to: '/graphics', icon: 'collections' },
+  { label: 'Settings', to: '/settings', icon: 'settings' },
+  { label: 'About', to: '/about', icon: 'info' },
+];
+
+const activeLabel = computed(() => {
+  const match = menuItems.find((item) => item.to === route.path);
+  return match?.label ?? 'Dashboard';
+});
 </script>
 
 <template>
-  <div>
+  <QLayout view="hHh LpR fFf">
-    {{ text }}
+    <QHeader elevated>
-    <br><br>
+      <QToolbar>
-    <img
+        <QToolbarTitle>{{ activeLabel }}</QToolbarTitle>
-      src="./image.png"
+      </QToolbar>
-      :style="{ width: '100%' }"
+    </QHeader>
+
+    <QDrawer
+      show-if-above
+      side="left"
+      bordered
+      :width="220"
     >
-    <br><br>
+      <QToolbar class="text-weight-bold">
-    <QBtn
+        Control Panel
-      color="primary"
+      </QToolbar>
-      label="Example"
+      <QList>
-    />
+        <QItem
-    <br><br>
+          v-for="item in menuItems"
-    <!-- Example code: accessing a replicant. -->
+          :key="item.to"
-    {{ exampleReplicant?.data?.exampleProperty }}
+          clickable
-  </div>
+          :to="item.to"
+          exact
+        >
+          <QItemSection avatar>
+            <QIcon :name="item.icon" />
+          </QItemSection>
+          <QItemSection>
+            <QItemLabel>{{ item.label }}</QItemLabel>
+          </QItemSection>
+        </QItem>
+      </QList>
+    </QDrawer>
+
+    <QPageContainer>
+      <RouterView />
+    </QPageContainer>
+  </QLayout>
 </template>

src/dashboard/example/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import AboutView from './views/About.vue';
+import DashboardView from './views/Dashboard.vue';
+import GraphicsView from './views/Graphics.vue';
+import PlayersView from './views/Players.vue';
+import SettingsView from './views/Settings.vue';
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    { path: '/', name: 'dashboard', component: DashboardView },
+    { path: '/players', name: 'players', component: PlayersView },
+    { path: '/graphics', name: 'graphics', component: GraphicsView },
+    { path: '/settings', name: 'settings', component: SettingsView },
+    { path: '/about', name: 'about', component: AboutView },
+  ],
+});
+
+export default router;

src/dashboard/example/views/About.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'About' });
+</script>
+
+<template>
+  <QPage class="q-pa-lg">
+    <div class="text-h4 q-mb-md">About</div>
+    <div class="text-body1">
+      Información del bundle y enlaces relevantes.
+    </div>
+  </QPage>
+</template>

src/dashboard/example/views/Dashboard.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Dashboard' });
+</script>
+
+<template>
+  <QPage class="q-pa-lg">
+    <div class="text-h4 q-mb-md">Dashboard</div>
+    <div class="text-body1">
+      Panel principal del dashboard.
+    </div>
+  </QPage>
+</template>

src/dashboard/example/views/Graphics.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Graphics' });
+</script>
+
+<template>
+  <QPage class="q-pa-lg">
+    <div class="text-h4 q-mb-md">Graphics</div>
+    <div class="text-body1">
+      Controles y estado de gráficos del bundle.
+    </div>
+  </QPage>
+</template>

src/dashboard/example/views/Players.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Players' });
+</script>
+
+<template>
+  <QPage class="q-pa-lg">
+    <div class="text-h4 q-mb-md">Players</div>
+    <div class="text-body1">
+      Gestión de jugadores y datos relacionados.
+    </div>
+  </QPage>
+</template>

src/dashboard/example/views/Settings.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Settings' });
+</script>
+
+<template>
+  <QPage class="q-pa-lg">
+    <div class="text-h4 q-mb-md">Settings</div>
+    <div class="text-body1">
+      Configuración del dashboard y del bundle.
+    </div>
+  </QPage>
+</template>

src/dashboard/template.html

@@ -5,7 +5,7 @@
     <style>
       body {
         background-color: #2F3A4F !important; /* force body background to original NodeCG colour */
-        margin: 15px !important; /* force body to have original NodeCG padding */
+        margin: 0 !important; /* remove default NodeCG padding for app layout */
         width: unset !important; /* unset quasar width */
         min-width: unset !important; /* unset quasar min-width */
         font-size: unset !important; /* unset quasar font-size */