From d8ab2b0ff65b33dfcd0189d46f1e859e2ed08690 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Sat, 17 Aug 2024 12:01:59 +0200
Subject: [PATCH] Improve sidenav display

by marking active item bold and using nested routes

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 src/main.ts    |   1 -
 src/router.ts  | 120 ++++++++++++++++++++++++++++++++++++++++++-------
 src/style.scss |   4 ++
 3 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 95ea3a3..4b3afbd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -212,7 +212,6 @@ const app = createApp({
 })
 
 app.config.globalProperties.bus = mitt()
-app.config.globalProperties.$foo = 'bare'
 app.use(i18n)
 app.use(router)
 app.mount('#app')
diff --git a/src/router.ts b/src/router.ts
index e991797..f579aca 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -6,29 +6,119 @@ import ChannelPermissions from './components/channelPermissions.vue'
 import Dashboard from './components/dashboard.vue'
 
 const routes = [
-  { component: Dashboard, name: 'dashboard', path: '/' },
+  {
+    component: Dashboard,
+    name: 'dashboard',
+    path: '/',
+  },
 
   // General settings
-  { component: BothAuth, name: 'botAuth', path: '/bot-auth' },
-  { component: ChannelOverview, name: 'channels', path: '/channels' },
-  { component: ChannelPermissions, name: 'channelPermissions', path: '/channels/:channel/permissions', props: true },
-  { component: {}, name: 'editors', path: '/editors' },
-  { component: {}, name: 'tokens', path: '/tokens' },
+  {
+    component: BothAuth,
+    name: 'botAuth',
+    path: '/bot-auth',
+  },
+  {
+    children: [
+      {
+        component: ChannelOverview,
+        name: 'channels',
+        path: '',
+      },
+      {
+        component: ChannelPermissions,
+        name: 'channelPermissions',
+        path: ':channel', props: true,
+      },
+    ],
+    path: '/channels',
+  },
+  {
+    component: {},
+    name: 'editors',
+    path: '/editors',
+  },
+  {
+    component: {},
+    name: 'tokens',
+    path: '/tokens',
+  },
 
   // Auto-Messages
-  { component: {}, name: 'autoMessagesList', path: '/auto-messages' },
-  { component: {}, name: 'autoMessageEdit', path: '/auto-messages/edit/:id' },
-  { component: {}, name: 'autoMessageNew', path: '/auto-messages/new' },
+  {
+    children: [
+      {
+        component: {},
+        name: 'autoMessagesList',
+        path: '',
+      },
+      {
+        component: {},
+        name: 'autoMessageEdit',
+        path: ':id',
+      },
+      {
+        component: {},
+        name: 'autoMessageNew',
+        path: 'new',
+      },
+    ],
+    path: '/auto-messages',
+  },
 
   // Rules
-  { component: {}, name: 'rulesList', path: '/rules' },
-  { component: {}, name: 'rulesEdit', path: '/rules/edit/:id' },
-  { component: {}, name: 'rulesNew', path: '/rules/new' },
+  {
+    children: [
+      {
+        component: {},
+        name: 'rulesList',
+        path: '',
+      },
+      {
+        component: {},
+        name: 'rulesEdit',
+        path: ':id',
+      },
+      {
+        component: {},
+        name: 'rulesNew',
+        path: 'new',
+      },
+    ],
+    path: '/rules',
+  },
 
   // Raffles
-  { component: {}, name: 'rafflesList', path: '/raffles' },
-  { component: {}, name: 'rafflesEdit', path: '/raffles/edit/:id' },
-  { component: {}, name: 'rafflesNew', path: '/raffles/new' },
+  {
+    children: [
+      {
+        component: {},
+        name: 'rafflesList',
+        path: '',
+      },
+      {
+        children: [
+          {
+            component: {},
+            name: 'rafflesEdit',
+            path: '',
+          },
+          {
+            component: {},
+            name: 'raffleEntries',
+            path: 'entries',
+          },
+        ],
+        path: ':id',
+      },
+      {
+        component: {},
+        name: 'rafflesNew',
+        path: 'new',
+      },
+    ],
+    path: '/raffles',
+  },
 ] as RouteRecordRaw[]
 
 const router = createRouter({
diff --git a/src/style.scss b/src/style.scss
index b649d00..e2451a2 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -8,6 +8,10 @@ body,
   height: 100%;
 }
 
+.nav-link.router-link-active {
+  font-weight: bold;
+}
+
 .user-select-text {
   user-select: text !important;
 }
\ No newline at end of file