From 3ca4f32344dbe9af219b17138db68cc120fe5e3b Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Thu, 23 Sep 2021 02:47:23 -0700
Subject: [PATCH] Change Schedule link to be new custom link

This link will allow us to not care about remembering to include
localePath and will correctly add the is-active class to link,
regardless of the query or hash

This change will be added to other links later, to avoid
breaking anything major right before a push. This is the only
page that will really benefit now as is.
---
 components/element/Link.vue              | 41 ++++++++++++++++++++++++
 components/marathon/sidebar/Overview.vue |  4 +--
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 components/element/Link.vue

diff --git a/components/element/Link.vue b/components/element/Link.vue
new file mode 100644
index 00000000..bf685473
--- /dev/null
+++ b/components/element/Link.vue
@@ -0,0 +1,41 @@
+<!--
+This is a custom linker to deal with a deficit in the Vue Router linking system
+Route matching only occur as route.startsWith(link) or route === link, neither of
+which work correctly universally. This will apparently be addressed more generally
+in the future.
+See: https://github.com/vuejs/rfcs/pull/136
+See also: https://github.com/vuejs/vue-router/issues/2040
+
+This is also somewhat nice to centralize the localePath logic, so we don't have
+to type it absolutely everywhere.
+-->
+
+<template>
+  <NuxtLink :to="path" :class="isActive">
+    <slot />
+  </NuxtLink>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { IsActive } from '~/types/components/is-active';
+
+export default Vue.extend({
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isActive(): IsActive {
+      return {
+        'is-active': this.$route.path === this.path,
+      };
+    },
+    path(): string {
+      return this.localePath(this.to);
+    },
+  },
+});
+</script>
diff --git a/components/marathon/sidebar/Overview.vue b/components/marathon/sidebar/Overview.vue
index 9d1fe15b..f3f956fe 100644
--- a/components/marathon/sidebar/Overview.vue
+++ b/components/marathon/sidebar/Overview.vue
@@ -13,12 +13,12 @@
         </NuxtLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/schedule`)">
+        <ElementLink :to="`/marathon/${marathonId}/schedule`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'calendar' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.schedule') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
         <NuxtLink :to="localePath(`/marathon/${marathonId}/submissions`)">