From 19c315a43aaf4246a5039dcb8a90f2e227a4b00f Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 12 Jul 2023 17:25:47 +0200
Subject: [PATCH] [web] Use named route for the music page

Switching to named routes in order to reduce future maintenance.
---
 web-src/src/components/NavbarTop.vue | 4 ++--
 web-src/src/router/index.js          | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index abcc7852..758a444e 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -9,7 +9,7 @@
       <navbar-item-link v-if="is_visible_playlists" :to="{ name: 'playlists' }">
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_music" :to="{ path: '/music' }">
+      <navbar-item-link v-if="is_visible_music" :to="{ name: 'music' }">
         <mdicon class="icon" name="music" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_podcasts" :to="{ name: 'podcasts' }">
@@ -61,7 +61,7 @@
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music' }" exact>
+            <navbar-item-link :to="{ name: 'music' }" exact>
               <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index e512c114..06f3bc20 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -110,6 +110,7 @@ export const router = createRouter({
       redirect: '/audiobooks/artists'
     },
     {
+      name: 'music',
       path: '/music',
       redirect: '/music/browse'
     },
@@ -301,13 +302,13 @@ export const router = createRouter({
     }
 
     if (to.path === from.path && to.hash) {
-      // We are staying on the same page and are jumping to an anker (e. g. index nav)
+      // We are staying on the same page and are jumping to an anchor (e. g. index nav)
       // We don't have a transition, so don't add a timeout!
       return { el: to.hash, top: 120 }
     }
 
     if (to.hash) {
-      // We are navigating to an anker of a new page, add a timeout to let the transition effect finish before scrolling
+      // We are navigating to an anchor of a new page, add a timeout to let the transition effect finish before scrolling
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve({ el: to.hash, top: 120 })
@@ -317,7 +318,7 @@ export const router = createRouter({
 
     if (to.meta.has_index) {
       // We are navigating to a page with index nav, that should be hidden automatically
-      // Dependending on wether we have a tab navigation, add an offset to the "top" anker
+      // Depending on wether we have a tab navigation, add an offset to the "top" anchor
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           if (to.meta.has_tabs) {