From 99b91f66eb266842614baaca4bf585bccfc5d43f Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 14 Dec 2021 12:37:32 -0700
Subject: [PATCH 1/7] feat: breadcrumbs

---
 vue-app/src/App.vue                    | 46 +++++++++++-------------
 vue-app/src/components/Breadcrumbs.vue | 49 ++++++++++++++++++++++++++
 vue-app/src/views/JoinLanding.vue      | 26 ++++++++++----
 3 files changed, 88 insertions(+), 33 deletions(-)
 create mode 100644 vue-app/src/components/Breadcrumbs.vue

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 84df1b1aa..515fdedd0 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -17,11 +17,7 @@
           'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
         }"
       >
-        <back-link
-          v-if="showBackLink"
-          :to="backLinkRoute"
-          :text="backLinkText"
-        />
+        <breadcrumbs v-if="showBackLink" :links="links" />
         <router-view :key="$route.path" />
       </div>
       <div
@@ -49,6 +45,7 @@ import CartWidget from '@/components/CartWidget.vue'
 import Cart from '@/components/Cart.vue'
 import MobileTabs from '@/components/MobileTabs.vue'
 import BackLink from '@/components/BackLink.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 
 import {
   LOAD_USER_INFO,
@@ -81,6 +78,7 @@ import { SET_CURRENT_USER } from '@/store/mutation-types'
     MobileTabs,
     CartWidget,
     BackLink,
+    Breadcrumbs,
   },
 })
 export default class App extends Vue {
@@ -139,6 +137,22 @@ export default class App extends Vue {
     return this.$route.name !== 'landing'
   }
 
+  get links(): Array<{ link: string; url: string }> {
+    const url = `${this.$route.path}`
+
+    const links = url
+      .split('/')
+      .splice(1)
+      .map((link) => {
+        return {
+          link,
+          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
+        }
+      })
+
+    return links
+  }
+
   get isSidebarShown(): boolean {
     const excludedRoutes = [
       'landing',
@@ -179,28 +193,8 @@ export default class App extends Vue {
     return routes.includes(this.$route.name || '')
   }
 
-  get backLinkRoute(): string {
-    const route = this.$route.name || ''
-    return route.includes('about-') ? '/about' : '/projects'
-  }
-
-  get backLinkText(): string {
-    const route = this.$route.name || ''
-    return route.includes('about-') ? '← Back to About' : '← Back to projects'
-  }
-
   get showBackLink(): boolean {
-    const excludedRoutes = [
-      'landing',
-      'project-added',
-      'join',
-      'join-step',
-      'projects',
-      'transaction-success',
-      'verify',
-      'verify-step',
-      'verified',
-    ]
+    const excludedRoutes = ['landing', 'join']
     return !excludedRoutes.includes(this.$route.name || '')
   }
 
diff --git a/vue-app/src/components/Breadcrumbs.vue b/vue-app/src/components/Breadcrumbs.vue
new file mode 100644
index 000000000..51cd10890
--- /dev/null
+++ b/vue-app/src/components/Breadcrumbs.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="breadcrumb">
+    <p>
+      <links class="link" to="/"> # /</links>
+    </p>
+    <p v-for="(link, idx) in links" :key="idx">
+      <links class="link" :to="link.url">
+        {{ link.link.toUpperCase() }} /
+      </links>
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+// Libraries
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
+
+// Components
+import Links from '@/components/Links.vue'
+
+@Component({ components: { Links } })
+export default class Breadcrumbs extends Vue {
+  @Prop() links!: Array<{ name: string; url: string }>
+}
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  position: relative;
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1rem 0;
+  z-index: 1;
+  p {
+    margin-right: 5px;
+  }
+}
+
+.link {
+  color: #fff;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index 6dc4b55ee..3f79889fc 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -7,11 +7,10 @@
     </div>
 
     <round-status-banner />
-    <back-link
-      :alsoShowOnMobile="true"
-      to="/projects"
-      text="← Back to projects"
-    />
+
+    <div class="breadcrumbs">
+      <breadcrumbs :links="links" />
+    </div>
 
     <div class="content" v-if="loading">
       <h1>Fetching round data...</h1>
@@ -141,7 +140,7 @@ import { BigNumber } from 'ethers'
 import { RegistryInfo } from '@/api/recipient-registry-optimistic'
 import Loader from '@/components/Loader.vue'
 import CriteriaModal from '@/components/CriteriaModal.vue'
-import BackLink from '@/components/BackLink.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Links from '@/components/Links.vue'
 import RoundStatusBanner from '@/components/RoundStatusBanner.vue'
 import TimeLeft from '@/components/TimeLeft.vue'
@@ -155,10 +154,10 @@ import { formatAmount } from '@/utils/amounts'
     RoundStatusBanner,
     CriteriaModal,
     Loader,
-    BackLink,
     Links,
     TimeLeft,
     ImageResponsive,
+    Breadcrumbs,
   },
 })
 export default class JoinLanding extends Vue {
@@ -166,6 +165,10 @@ export default class JoinLanding extends Vue {
   loading = true
   showCriteriaPanel = false
 
+  get links(): Array<{ link: string; url: string }> {
+    return [{ link: 'join', url: '/join' }]
+  }
+
   async created() {
     this.currentRound = await getCurrentRound()
     this.loading = false
@@ -290,6 +293,15 @@ h1 {
   }
 }
 
+.breadcrumbs {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  padding-left: $content-space;
+  margin-left: 2rem;
+  width: min(100%, 512px);
+}
+
 .content {
   position: relative;
   z-index: 1;

From 2657648eea1f7200513c05fc62bfe4182d097034 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 8 Jan 2022 11:04:28 -0700
Subject: [PATCH 2/7] fix: wrap text in breadcrumbs

---
 vue-app/src/components/Breadcrumbs.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/vue-app/src/components/Breadcrumbs.vue b/vue-app/src/components/Breadcrumbs.vue
index 51cd10890..fd6282174 100644
--- a/vue-app/src/components/Breadcrumbs.vue
+++ b/vue-app/src/components/Breadcrumbs.vue
@@ -31,12 +31,13 @@ export default class Breadcrumbs extends Vue {
   position: relative;
   display: flex;
   flex: 1 0 auto;
+  flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
   padding: 1rem 0;
   z-index: 1;
   p {
-    margin-right: 5px;
+    margin: 0 5px 0 0;
   }
 }
 

From 0fbdb5516aa149bd43aff71dc4dad5c02dd75405 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 8 Jan 2022 11:42:09 -0700
Subject: [PATCH 3/7] fix: remove address hash from projects breadcrumbs

---
 vue-app/src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 515fdedd0..98c7fe5b9 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -143,9 +143,10 @@ export default class App extends Vue {
     const links = url
       .split('/')
       .splice(1)
+      .filter((link) => !link.includes('0x')) // Filter out address hash
       .map((link) => {
         return {
-          link,
+          link: link === 'project' ? 'projects' : link,
           url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
         }
       })

From 47df24f7bd9cced76270ce70b460eb531fcac9e9 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 8 Jan 2022 20:03:19 -0700
Subject: [PATCH 4/7] fix: fix breadcrumb positioning in transaction-success
 and verify components

---
 vue-app/src/App.vue                      |  6 +++---
 vue-app/src/views/TransactionSuccess.vue | 21 ++++++++++++++++++++-
 vue-app/src/views/VerifyLanding.vue      | 20 ++++++++++++++++++++
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 98c7fe5b9..fa5c58dc7 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -17,7 +17,7 @@
           'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
         }"
       >
-        <breadcrumbs v-if="showBackLink" :links="links" />
+        <breadcrumbs v-if="showBreadCrumb" :links="links" />
         <router-view :key="$route.path" />
       </div>
       <div
@@ -194,8 +194,8 @@ export default class App extends Vue {
     return routes.includes(this.$route.name || '')
   }
 
-  get showBackLink(): boolean {
-    const excludedRoutes = ['landing', 'join']
+  get showBreadCrumb(): boolean {
+    const excludedRoutes = ['landing', 'join', 'transaction-success', 'verify']
     return !excludedRoutes.includes(this.$route.name || '')
   }
 
diff --git a/vue-app/src/views/TransactionSuccess.vue b/vue-app/src/views/TransactionSuccess.vue
index 7353f692f..d0f699181 100644
--- a/vue-app/src/views/TransactionSuccess.vue
+++ b/vue-app/src/views/TransactionSuccess.vue
@@ -7,6 +7,7 @@
     </div>
     <div class="dropshadow">
       <div class="content">
+        <breadcrumbs :links="links" />
         <span class="contributed-icon">🎉</span>
         <p
           v-if="$route.params.type === 'reallocation'"
@@ -74,12 +75,13 @@ import { RoundInfo } from '@/api/round'
 import TransactionReceipt from '@/components/TransactionReceipt.vue'
 import TimeLeft from '@/components/TimeLeft.vue'
 import ImageResponsive from '@/components/ImageResponsive.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 
 // Utils
 import { formatAmount } from '@/utils/amounts'
 
 @Component({
-  components: { TransactionReceipt, TimeLeft, ImageResponsive },
+  components: { TransactionReceipt, TimeLeft, ImageResponsive, Breadcrumbs },
 })
 export default class TransactionSuccess extends Vue {
   get contribution(): BigNumber | null {
@@ -90,6 +92,23 @@ export default class TransactionSuccess extends Vue {
     return this.$store.state.currentRound
   }
 
+  get links(): Array<{ link: string; url: string }> {
+    const url = `${this.$route.path}`
+
+    const links = url
+      .split('/')
+      .splice(1)
+      .filter((link) => !link.includes('0x')) // Filter out address hash
+      .map((link) => {
+        return {
+          link: link === 'project' ? 'projects' : link,
+          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
+        }
+      })
+
+    return links
+  }
+
   formatContribution() {
     return this.contribution ? formatAmount(this.contribution, 18) : ''
   }
diff --git a/vue-app/src/views/VerifyLanding.vue b/vue-app/src/views/VerifyLanding.vue
index 049f1cc45..6e4c5952b 100644
--- a/vue-app/src/views/VerifyLanding.vue
+++ b/vue-app/src/views/VerifyLanding.vue
@@ -11,6 +11,7 @@
         </div>
       </div>
       <div class="content">
+        <breadcrumbs :links="links" />
         <div class="flex-title">
           <h1>Prove you’re only using one account</h1>
         </div>
@@ -90,6 +91,7 @@ import { commify, formatUnits } from '@ethersproject/units'
 import { getCurrentRound } from '@/api/round'
 import { User } from '@/api/user'
 
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Links from '@/components/Links.vue'
 import Loader from '@/components/Loader.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
@@ -99,6 +101,7 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 
 @Component({
   components: {
+    Breadcrumbs,
     Links,
     Loader,
     ProgressBar,
@@ -140,6 +143,23 @@ export default class VerifyLanding extends Vue {
     return this.$store.getters.hasContributionPhaseEnded
   }
 
+  get links(): Array<{ link: string; url: string }> {
+    const url = `${this.$route.path}`
+
+    const links = url
+      .split('/')
+      .splice(1)
+      .filter((link) => !link.includes('0x')) // Filter out address hash
+      .map((link) => {
+        return {
+          link: link === 'project' ? 'projects' : link,
+          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
+        }
+      })
+
+    return links
+  }
+
   formatDuration(value: number): string {
     return humanizeDuration(value * 1000, { largest: 1 })
   }

From dd4cd88174bbd4ff22b7855af3c03516e04f9790 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 8 Jan 2022 20:16:43 -0700
Subject: [PATCH 5/7] fix: refactor breadcrumbs to clean up links method

---
 vue-app/src/App.vue                      | 19 +++----------------
 vue-app/src/components/Breadcrumbs.vue   | 19 ++++++++++++++++++-
 vue-app/src/views/JoinLanding.vue        |  6 +++++-
 vue-app/src/views/TransactionSuccess.vue | 19 +++----------------
 vue-app/src/views/VerifyLanding.vue      | 19 +++----------------
 5 files changed, 32 insertions(+), 50 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index fa5c58dc7..b5e58db0f 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -17,7 +17,7 @@
           'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
         }"
       >
-        <breadcrumbs v-if="showBreadCrumb" :links="links" />
+        <breadcrumbs v-if="showBreadCrumb" :path="path" />
         <router-view :key="$route.path" />
       </div>
       <div
@@ -137,21 +137,8 @@ export default class App extends Vue {
     return this.$route.name !== 'landing'
   }
 
-  get links(): Array<{ link: string; url: string }> {
-    const url = `${this.$route.path}`
-
-    const links = url
-      .split('/')
-      .splice(1)
-      .filter((link) => !link.includes('0x')) // Filter out address hash
-      .map((link) => {
-        return {
-          link: link === 'project' ? 'projects' : link,
-          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
-        }
-      })
-
-    return links
+  get path(): string {
+    return this.$route.path
   }
 
   get isSidebarShown(): boolean {
diff --git a/vue-app/src/components/Breadcrumbs.vue b/vue-app/src/components/Breadcrumbs.vue
index fd6282174..232e03c2d 100644
--- a/vue-app/src/components/Breadcrumbs.vue
+++ b/vue-app/src/components/Breadcrumbs.vue
@@ -22,7 +22,24 @@ import Links from '@/components/Links.vue'
 
 @Component({ components: { Links } })
 export default class Breadcrumbs extends Vue {
-  @Prop() links!: Array<{ name: string; url: string }>
+  @Prop() path!: string
+
+  get links(): Array<{ link: string; url: string }> {
+    const url = this.path
+
+    const links = url
+      .split('/')
+      .splice(1)
+      .filter((link) => !link.includes('0x')) // Filter out address hash
+      .map((link) => {
+        return {
+          link: link === 'project' ? 'projects' : link,
+          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
+        }
+      })
+
+    return links
+  }
 }
 </script>
 
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index 3f79889fc..f6f5ada8d 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -9,7 +9,7 @@
     <round-status-banner />
 
     <div class="breadcrumbs">
-      <breadcrumbs :links="links" />
+      <breadcrumbs :path="path" />
     </div>
 
     <div class="content" v-if="loading">
@@ -169,6 +169,10 @@ export default class JoinLanding extends Vue {
     return [{ link: 'join', url: '/join' }]
   }
 
+  get path(): string {
+    return this.$route.path
+  }
+
   async created() {
     this.currentRound = await getCurrentRound()
     this.loading = false
diff --git a/vue-app/src/views/TransactionSuccess.vue b/vue-app/src/views/TransactionSuccess.vue
index d0f699181..89e139f28 100644
--- a/vue-app/src/views/TransactionSuccess.vue
+++ b/vue-app/src/views/TransactionSuccess.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="dropshadow">
       <div class="content">
-        <breadcrumbs :links="links" />
+        <breadcrumbs :path="path" />
         <span class="contributed-icon">🎉</span>
         <p
           v-if="$route.params.type === 'reallocation'"
@@ -92,21 +92,8 @@ export default class TransactionSuccess extends Vue {
     return this.$store.state.currentRound
   }
 
-  get links(): Array<{ link: string; url: string }> {
-    const url = `${this.$route.path}`
-
-    const links = url
-      .split('/')
-      .splice(1)
-      .filter((link) => !link.includes('0x')) // Filter out address hash
-      .map((link) => {
-        return {
-          link: link === 'project' ? 'projects' : link,
-          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
-        }
-      })
-
-    return links
+  get path(): string {
+    return this.$route.path
   }
 
   formatContribution() {
diff --git a/vue-app/src/views/VerifyLanding.vue b/vue-app/src/views/VerifyLanding.vue
index 6e4c5952b..56472cc9c 100644
--- a/vue-app/src/views/VerifyLanding.vue
+++ b/vue-app/src/views/VerifyLanding.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="content">
-        <breadcrumbs :links="links" />
+        <breadcrumbs :path="path" />
         <div class="flex-title">
           <h1>Prove you’re only using one account</h1>
         </div>
@@ -143,21 +143,8 @@ export default class VerifyLanding extends Vue {
     return this.$store.getters.hasContributionPhaseEnded
   }
 
-  get links(): Array<{ link: string; url: string }> {
-    const url = `${this.$route.path}`
-
-    const links = url
-      .split('/')
-      .splice(1)
-      .filter((link) => !link.includes('0x')) // Filter out address hash
-      .map((link) => {
-        return {
-          link: link === 'project' ? 'projects' : link,
-          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
-        }
-      })
-
-    return links
+  get path(): string {
+    return this.$route.path
   }
 
   formatDuration(value: number): string {

From e76e6154f3e9ffd60c6a0b36ab11e3973472ff47 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 10 Jan 2022 13:26:10 -0700
Subject: [PATCH 6/7] fix: remove breadcrumbs from pages where UX is awkward

---
 vue-app/src/App.vue                      | 9 ++++++++-
 vue-app/src/views/TransactionSuccess.vue | 8 +-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 71318afe7..83ef9c972 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -184,7 +184,14 @@ export default class App extends Vue {
   }
 
   get showBreadCrumb(): boolean {
-    const excludedRoutes = ['landing', 'join', 'transaction-success', 'verify']
+    const excludedRoutes = [
+      'landing',
+      'join',
+      'transaction-success',
+      'verify',
+      'project-added',
+      'verified',
+    ]
     return !excludedRoutes.includes(this.$route.name || '')
   }
 
diff --git a/vue-app/src/views/TransactionSuccess.vue b/vue-app/src/views/TransactionSuccess.vue
index 89e139f28..7353f692f 100644
--- a/vue-app/src/views/TransactionSuccess.vue
+++ b/vue-app/src/views/TransactionSuccess.vue
@@ -7,7 +7,6 @@
     </div>
     <div class="dropshadow">
       <div class="content">
-        <breadcrumbs :path="path" />
         <span class="contributed-icon">🎉</span>
         <p
           v-if="$route.params.type === 'reallocation'"
@@ -75,13 +74,12 @@ import { RoundInfo } from '@/api/round'
 import TransactionReceipt from '@/components/TransactionReceipt.vue'
 import TimeLeft from '@/components/TimeLeft.vue'
 import ImageResponsive from '@/components/ImageResponsive.vue'
-import Breadcrumbs from '@/components/Breadcrumbs.vue'
 
 // Utils
 import { formatAmount } from '@/utils/amounts'
 
 @Component({
-  components: { TransactionReceipt, TimeLeft, ImageResponsive, Breadcrumbs },
+  components: { TransactionReceipt, TimeLeft, ImageResponsive },
 })
 export default class TransactionSuccess extends Vue {
   get contribution(): BigNumber | null {
@@ -92,10 +90,6 @@ export default class TransactionSuccess extends Vue {
     return this.$store.state.currentRound
   }
 
-  get path(): string {
-    return this.$route.path
-  }
-
   formatContribution() {
     return this.contribution ? formatAmount(this.contribution, 18) : ''
   }

From dea49b0e0539254cf63ee5b89ef64533e8019e2e Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 10 Jan 2022 13:34:37 -0700
Subject: [PATCH 7/7] fix: cleanup breadcrumbs some more

---
 vue-app/src/App.vue                    | 6 +-----
 vue-app/src/components/Breadcrumbs.vue | 2 +-
 vue-app/src/views/JoinLanding.vue      | 6 +-----
 vue-app/src/views/VerifyLanding.vue    | 6 +-----
 4 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 83ef9c972..6dddb8046 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -17,7 +17,7 @@
           'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
         }"
       >
-        <breadcrumbs v-if="showBreadCrumb" :path="path" />
+        <breadcrumbs v-if="showBreadCrumb" />
         <router-view :key="$route.path" />
       </div>
       <div
@@ -139,10 +139,6 @@ export default class App extends Vue {
     return this.$route.name !== 'landing'
   }
 
-  get path(): string {
-    return this.$route.path
-  }
-
   get isSidebarShown(): boolean {
     const excludedRoutes = [
       'landing',
diff --git a/vue-app/src/components/Breadcrumbs.vue b/vue-app/src/components/Breadcrumbs.vue
index 232e03c2d..dc0a8fd3c 100644
--- a/vue-app/src/components/Breadcrumbs.vue
+++ b/vue-app/src/components/Breadcrumbs.vue
@@ -25,7 +25,7 @@ export default class Breadcrumbs extends Vue {
   @Prop() path!: string
 
   get links(): Array<{ link: string; url: string }> {
-    const url = this.path
+    const url = this.$route.path
 
     const links = url
       .split('/')
diff --git a/vue-app/src/views/JoinLanding.vue b/vue-app/src/views/JoinLanding.vue
index 447eda9d3..ef176ca08 100644
--- a/vue-app/src/views/JoinLanding.vue
+++ b/vue-app/src/views/JoinLanding.vue
@@ -9,7 +9,7 @@
     <round-status-banner />
 
     <div class="breadcrumbs">
-      <breadcrumbs :path="path" />
+      <breadcrumbs />
     </div>
     <div class="content" v-if="loading">
       <h1>Fetching round data...</h1>
@@ -168,10 +168,6 @@ export default class JoinLanding extends Vue {
     return [{ link: 'join', url: '/join' }]
   }
 
-  get path(): string {
-    return this.$route.path
-  }
-
   async created() {
     this.currentRound = await getCurrentRound()
     this.loading = false
diff --git a/vue-app/src/views/VerifyLanding.vue b/vue-app/src/views/VerifyLanding.vue
index 0c4c6cd0f..489823390 100644
--- a/vue-app/src/views/VerifyLanding.vue
+++ b/vue-app/src/views/VerifyLanding.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="content">
-        <breadcrumbs :path="path" />
+        <breadcrumbs />
         <div class="flex-title">
           <h1>Prove you’re only using one account</h1>
         </div>
@@ -143,10 +143,6 @@ export default class VerifyLanding extends Vue {
     return this.$store.getters.hasContributionPhaseEnded
   }
 
-  get path(): string {
-    return this.$route.path
-  }
-
   formatDuration(value: number): string {
     return humanizeDuration(value * 1000, { largest: 1 })
   }