highlight nested routes in nav

src/app/Nav.vue

@@ -19,7 +19,7 @@
       Library
     </small>
 
-    <router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
+    <router-link class="nav-link" :to="{name: 'albums-default'}">
       <Icon icon="collection" /> Albums
     </router-link>
 

src/app/Sidebar.vue

@@ -51,7 +51,7 @@
     margin-right: 0.75rem;
   }
 
-  .sidebar-container .nav-link:not(.active) .b-icon {
+  .sidebar-container .nav-link:not(.router-link-active) .b-icon {
     color: var(--text-muted);
   }
   .sidebar-container .nav-link:hover {
@@ -59,6 +59,7 @@
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active {
+    color: var(--primary);
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active:hover {

src/shared/router.ts

@@ -44,6 +44,14 @@ export function setupRouter(auth: AuthService) {
         path: '/queue',
         component: Queue,
       },
+      {
+        name: 'albums-default',
+        path: '/albums',
+        redirect: ({
+          name: 'albums',
+          params: { sort: 'recently-added' }
+        }),
+      },
       {
         name: 'albums',
         path: '/albums/:sort',
@@ -52,7 +60,7 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'album',
-        path: '/album/:id',
+        path: '/albums/id/:id',
         component: AlbumDetails,
         props: true,
       },
@@ -63,7 +71,7 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'artist',
-        path: '/artist/:id',
+        path: '/artists/:id',
         component: ArtistDetails,
         props: true,
       },
@@ -74,7 +82,7 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'genre',
-        path: '/genre/:id/:section?',
+        path: '/genres/:id/:section?',
         component: GenreDetails,
         props: true,
       },
@@ -95,7 +103,7 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'podcast',
-        path: '/podcast/:id',
+        path: '/podcasts/:id',
         component: PodcastDetails,
         props: true,
       },