From f306b07f3ef1f0b61d39da55a6b66193b78a9eee Mon Sep 17 00:00:00 2001
From: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date: Sat, 16 Oct 2021 12:52:26 +0200
Subject: [PATCH] improved subNav for matches

---
 src/App.vue         |  4 ++--
 src/router/index.js | 29 ++++++++++++++++++-----------
 src/utils/GoTo.js   |  2 +-
 src/views/Match.vue | 45 +++++++++++++++++++++++++++------------------
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4af314d..bd8d03e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
   </header>
   <main>
     <div class="spacer"></div>
-    <router-view/>
+    <router-view name="main" />
   </main>
   <footer class="mt-auto">
     <Footer />
@@ -24,4 +24,4 @@ export default {
 .spacer {
   height: 70px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index a7ecffa..0d7c3a6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,23 +12,36 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: lazyLoadView('Home')
+    components: {
+      main: lazyLoadView('Home')
+    }
+  },
+  {
+    path: '/explore',
+    name: 'Explore',
+    components: {
+      main: lazyLoadView('Explore')
+    }
   },
   {
     path: '/player/:id',
     name: 'Player',
-    component: lazyLoadView('Player'),
+    components: {
+      main: lazyLoadView('Player'),
+    },
     props: true
   },
   {
     path: '/match/:match_id',
     name: 'Match',
-    component: lazyLoadView('Match'),
+    // redirect: '/match/:match_id/overview',
+    components: {
+      main: lazyLoadView('Match')
+    },
     props: true,
     children: [
       {
-        path: '',
-        alias: '/match/:match_id',
+        path: 'overview',
         components: {
           score: lazyLoadComponent('ScoreTeam')
         }
@@ -59,12 +72,6 @@ const routes = [
       }
     ]
   },
-  {
-    path: '/explore',
-    name: 'Explore',
-    component: lazyLoadView('Explore'),
-    props: true
-  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/'
diff --git a/src/utils/GoTo.js b/src/utils/GoTo.js
index cde2754..6beebdd 100644
--- a/src/utils/GoTo.js
+++ b/src/utils/GoTo.js
@@ -9,5 +9,5 @@ export const GoToPlayer = (id) => {
 }
 
 export const GoToLink = (link) => {
-  router.push(link)
+  router.replace(link)
 }
diff --git a/src/views/Match.vue b/src/views/Match.vue
index c038d40..cb75953 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -38,36 +38,36 @@
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id"
-                       class="nav-link" name="score">Scoreboard
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/overview'" replace
+                       class="nav-link">Scoreboard
           </router-link>
         </li>
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'"
-                       class="nav-link" name="score">Details
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'" replace
+                       class="nav-link">Details
           </router-link>
         </li>
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'"
-                       class="nav-link" name="score">Flashes
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'" replace
+                       class="nav-link">Flashes
           </router-link>
         </li>
-<!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
-<!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
-<!--            class="list-item nav-item">-->
-<!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'"-->
-<!--                       class="nav-link" name="score">Utility-->
-<!--          </router-link>-->
-<!--        </li>-->
+        <!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
+        <!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
+        <!--            class="list-item nav-item">-->
+        <!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace-->
+        <!--                       class="nav-link">Utility-->
+        <!--          </router-link>-->
+        <!--        </li>-->
         <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
             :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'"
-                       class="nav-link" name="score">Damage
+          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'" replace
+                       class="nav-link">Damage
           </router-link>
         </li>
       </ul>
@@ -141,6 +141,17 @@ export default {
         data.avgRank = Math.floor(fullRank / count)
     }
 
+    const checkRoute = () => {
+      if (route.fullPath.split('/')[3]) {
+        const sub = route.fullPath.split('/')[3]
+        GoToLink(`/match/${props.match_id}/${sub}`)
+      } else if (route.fullPath.split('/')[3] === undefined) {
+        // setTimeout(() => {
+          GoToLink(`/match/${props.match_id}/overview`)
+        // }, 200)
+      }
+    }
+
     // Watchers
     watch(() => props.match_id, GetMatch)
     watch(() => data.stats, GetAvgRank)
@@ -151,9 +162,7 @@ export default {
     })
 
     onMounted(() => {
-      if (!route.fullPath.match('details' || 'flashes' || 'damage')) {
-        GoToLink(`/match/${props.match_id}`)
-      }
+      checkRoute()
     })
 
     return {