From 1234e61e1492c3fe15df24658cee2575872af3e8 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sun, 1 May 2022 14:57:04 +0200
Subject: [PATCH] Remove exact prop from router links

---
 front/src/components/Sidebar.vue           |  4 ++--
 front/src/components/library/Radios.vue    |  1 -
 front/src/router/index.ts                  |  1 +
 front/src/style/components/_sidebar.scss   |  2 +-
 front/src/views/auth/ProfileBase.vue       |  2 --
 front/src/views/channels/DetailBase.vue    |  4 ++--
 front/src/views/content/libraries/Card.vue |  1 -
 front/src/views/library/DetailBase.vue     | 10 +++++-----
 front/src/views/radios/Detail.vue          |  2 --
 9 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index aeeb7287f..5c35e017d 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -305,8 +305,8 @@
               </router-link>
               <router-link
                 class="item"
-                :exact="true"
                 :to="{name: 'library.index'}"
+                active-class="_active"
               >
                 <i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
                   Browse
@@ -376,7 +376,6 @@
             <div class="menu">
               <router-link
                 class="item"
-                :exact="true"
                 :to="{name: 'library.me'}"
               >
                 <i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
@@ -444,6 +443,7 @@
               <router-link
                 class="item"
                 to="/about"
+                active-class="router-link-exact-active active"
               >
                 <i class="info icon" /><translate translate-context="Sidebar/*/List item.Link">
                   About this pod
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 94fecf7ad..df80b6650 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -42,7 +42,6 @@
         v-if="isAuthenticated"
         class="ui success button"
         to="/library/radios/build"
-        exact
       >
         <translate translate-context="Content/Radio/Button.Label/Verb">
           Create your own radio
diff --git a/front/src/router/index.ts b/front/src/router/index.ts
index 3d48dc083..38c9229d0 100644
--- a/front/src/router/index.ts
+++ b/front/src/router/index.ts
@@ -70,6 +70,7 @@ export default createRouter({
         import('~/components/About.vue')
     },
     {
+      // TODO (wvffle): Make it a child of /about to have the active style on the sidebar link
       path: '/about/pod',
       name: 'about-pod',
       component: () =>
diff --git a/front/src/style/components/_sidebar.scss b/front/src/style/components/_sidebar.scss
index ada61d833..2da18d514 100644
--- a/front/src/style/components/_sidebar.scss
+++ b/front/src/style/components/_sidebar.scss
@@ -84,7 +84,7 @@
                 margin: 0 0.5em 0 0;
             }
         }
-        .item.active {
+        .item.router-link-exact-active {
             border-right: 5px solid var(--vibrant-color);
             border-radius: 0 !important;
             background: var(--sidebar-active-item-background) !important;
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 86c7d9f19..036b83ef1 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -106,7 +106,6 @@
               <div class="ui secondary pointing center aligned menu">
                 <router-link
                   class="item"
-                  :exact="true"
                   :to="{name: 'profile.overview', params: routerParams}"
                 >
                   <translate translate-context="Content/Profile/Link">
@@ -115,7 +114,6 @@
                 </router-link>
                 <router-link
                   class="item"
-                  :exact="true"
                   :to="{name: 'profile.activity', params: routerParams}"
                 >
                   <translate translate-context="Content/Profile/*">
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 97d0e8b7b..bfcc7aa0c 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -395,7 +395,7 @@
             <div class="ui secondary pointing center aligned menu">
               <router-link
                 class="item"
-                :exact="true"
+
                 :to="{name: 'channels.detail', params: {id: id}}"
               >
                 <translate translate-context="Content/Channels/Link">
@@ -404,7 +404,7 @@
               </router-link>
               <router-link
                 class="item"
-                :exact="true"
+
                 :to="{name: 'channels.detail.episodes', params: {id: id}}"
               >
                 <translate
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 36ab89f3e..5f3144b34 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -66,7 +66,6 @@
       </router-link>
       <router-link
         :to="{name: 'library.detail', params: {id: library.uuid}}"
-        exact
         class="ui button"
       >
         <translate translate-context="Content/Library/Card.Button.Label/Noun">
diff --git a/front/src/views/library/DetailBase.vue b/front/src/views/library/DetailBase.vue
index ff497fdf7..49e7b7b26 100644
--- a/front/src/views/library/DetailBase.vue
+++ b/front/src/views/library/DetailBase.vue
@@ -162,7 +162,7 @@
               <div class="ui secondary pointing center aligned menu">
                 <router-link
                   class="item"
-                  :exact="true"
+
                   :to="{name: 'library.detail'}"
                 >
                   <translate translate-context="*/*/*">
@@ -171,7 +171,7 @@
                 </router-link>
                 <router-link
                   class="item"
-                  :exact="true"
+
                   :to="{name: 'library.detail.albums'}"
                 >
                   <translate translate-context="*/*/*">
@@ -180,7 +180,7 @@
                 </router-link>
                 <router-link
                   class="item"
-                  :exact="true"
+
                   :to="{name: 'library.detail.tracks'}"
                 >
                   <translate translate-context="*/*/*">
@@ -190,7 +190,7 @@
                 <router-link
                   v-if="isOwner"
                   class="item"
-                  :exact="true"
+
                   :to="{name: 'library.detail.upload'}"
                 >
                   <i class="upload icon" />
@@ -201,7 +201,7 @@
                 <router-link
                   v-if="isOwner"
                   class="item"
-                  :exact="true"
+
                   :to="{name: 'library.detail.edit'}"
                 >
                   <i class="pencil icon" />
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 20709fffb..bfa432110 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -32,7 +32,6 @@
           <router-link
             class="ui icon labeled button"
             :to="{name: 'library.radios.edit', params: {id: radio.id}}"
-            exact
           >
             <i class="pencil icon" />
             Edit…
@@ -100,7 +99,6 @@
         v-if="$store.state.auth.username === radio.user.username"
         class="ui success icon labeled button"
         :to="{name: 'library.radios.edit', params: {id: radio.id}}"
-        exact
       >
         <i class="pencil icon" />
         Edit…