From ff954c33341c408323fad8485526d689d7f79899 Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Fri, 29 Nov 2024 12:41:41 -0800
Subject: [PATCH 1/8] breadcrumbs base

---
 web/site/app/app.vue                       |  3 +-
 web/site/app/components/Sbc/Breadcrumb.vue | 57 ++++++++++++++++++++++
 web/site/app/composables/sbcBreadcrumb.ts  | 25 ++++++++++
 web/site/app/locales/en-CA.ts              |  8 +++
 web/site/app/pages/index.vue               | 11 ++++-
 web/site/app/pages/products/[...slug].vue  | 12 +++++
 web/site/app/pages/products/index.vue      | 10 ++++
 web/site/app/utils/setBreadcrumb.ts        |  5 ++
 web/site/nuxt.config.ts                    |  6 +++
 9 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 web/site/app/components/Sbc/Breadcrumb.vue
 create mode 100644 web/site/app/composables/sbcBreadcrumb.ts
 create mode 100644 web/site/app/utils/setBreadcrumb.ts

diff --git a/web/site/app/app.vue b/web/site/app/app.vue
index 192a03b1..768b75d7 100644
--- a/web/site/app/app.vue
+++ b/web/site/app/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SbcHeaderMain, SbcFooter } from '#components'
+import { SbcHeaderMain, SbcFooter, SbcBreadcrumb } from '#components'
 const { locale } = useI18n()
 const localePath = useLocalePath()
 // const user = useCurrentUser()
@@ -83,6 +83,7 @@ provide('footerHeight', footerHeight)
         $route.path.includes('dashboard') ? dashboardNavItems : undefined
       "
     />
+    <SbcBreadcrumb />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
new file mode 100644
index 00000000..093e35dd
--- /dev/null
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { BreadcrumbLink } from '#ui/types'
+const { t } = useI18n()
+
+const breadcrumbs = computed<BreadcrumbLink[]>(() => {
+  const route = useRoute()
+
+  if (route.meta.breadcrumbs) {
+    return route.meta.breadcrumbs
+  } else {
+    return [{ label: t('sbcBreadcrumb.default') }]
+  }
+})
+
+function resolveBackHref () {
+  const bcLength = breadcrumbs.value.length
+
+  if (bcLength > 1) {
+    // return the second to last breadcrumb link
+    return breadcrumbs.value[bcLength - 2]?.to ?? breadcrumbs.value[bcLength - 2]?.href
+  } else {
+    return ''
+  }
+}
+</script>
+<template>
+  <div class="bg-bcGovColor-nonClickable">
+    <div class="mx-auto flex max-w-full items-center divide-x divide-gray-300 px-4 py-2">
+      <UButton
+        class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
+        color="white"
+        :disabled="breadcrumbs.length < 2"
+        icon="i-mdi-arrow-left"
+        :aria-label="$t('ConnectBreadcrumb.backBtn')"
+        data-cy="crumb-back"
+        :to="resolveBackHref()"
+      />
+      <UBreadcrumb
+        :links="breadcrumbs"
+        :aria-label="$t('ConnectBreadcrumb.arialabel')"
+        class="pl-3"
+        :ui="{
+          li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
+          base: 'flex items-center gap-x-1.5 group font-normal min-w-0',
+          label: 'block truncate tracking-wide',
+          active: 'text-white',
+          inactive: 'text-white underline hover:text-white',
+          icon: {
+            base: 'flex-shrink-0 w-3 h-3 text-white',
+            active: '',
+            inactive: '',
+          },
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/site/app/composables/sbcBreadcrumb.ts b/web/site/app/composables/sbcBreadcrumb.ts
new file mode 100644
index 00000000..a0371bd4
--- /dev/null
+++ b/web/site/app/composables/sbcBreadcrumb.ts
@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+
+export function useBreadcrumbs () {
+  const { t } = useI18n()
+  const route = useRoute()
+  const localePath = useLocalePath()
+
+  const breadcrumbs = computed(() => {
+    const bc = [
+      { label: t('sbcBreadcrumb.default'), to: '/' }
+    ]
+    bc.push({ label: t('sbcBreadcrumb.sbcHome'), to: '/' })
+    // Check for /products
+    if (route.path.includes('/products') && !route.path.includes('/get-started')) {
+      bc.push({ label: t('sbcBreadcrumb.sbcProducts'), to: localePath('/products') })
+    }
+    // Check for /products/get-started and include sub-paths like /account-setup
+    if (route.path.includes('/products/get-started')) {
+      bc.push({ label: t('sbcBreadcrumb.sbcDocs'), to: localePath('/products/get-started') })
+    }
+
+    return bc
+  })
+  return breadcrumbs
+}
diff --git a/web/site/app/locales/en-CA.ts b/web/site/app/locales/en-CA.ts
index 75c307a5..a59afd4f 100644
--- a/web/site/app/locales/en-CA.ts
+++ b/web/site/app/locales/en-CA.ts
@@ -20,6 +20,14 @@ export default {
     openMainNav: 'Open Main Navigation Menu',
     closeMainNav: 'Close Main Navigation Menu'
   },
+  sbcBreadcrumb: {
+    default: 'BC Registries and Digital Service',
+    backBtn: 'Go Back',
+    arialabel: 'Breadcrumb',
+    sbcHome: 'Service BC Connect',
+    sbcProducts: 'Products',
+    sbcDocs: 'Documentation'
+  },
   page: {
     notFound: {
       h1: 'Page Not Found'
diff --git a/web/site/app/pages/index.vue b/web/site/app/pages/index.vue
index b0281fc5..b446bd3f 100644
--- a/web/site/app/pages/index.vue
+++ b/web/site/app/pages/index.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
 const { t } = useI18n()
 useHead({
   title: t('page.home.title')
 })
-const localePath = useLocalePath()
+
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
 
 </script>
 <template>
diff --git a/web/site/app/pages/products/[...slug].vue b/web/site/app/pages/products/[...slug].vue
index fec5eb9e..6c7bb727 100644
--- a/web/site/app/pages/products/[...slug].vue
+++ b/web/site/app/pages/products/[...slug].vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+
 definePageMeta({
   layout: 'docs'
 })
+
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
+
 </script>
 <template>
   <ContentDoc
diff --git a/web/site/app/pages/products/index.vue b/web/site/app/pages/products/index.vue
index 7c0dbc0e..94cce29d 100644
--- a/web/site/app/pages/products/index.vue
+++ b/web/site/app/pages/products/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
 const { t, locale } = useI18n()
 useHead({
   title: t('page.products.title')
@@ -20,6 +21,15 @@ const completedProducts = computed(() => {
   return products.value?.sort((a, b) => a.name.localeCompare(b.name)) ?? []
 })
 
+const breadcrumbs = useBreadcrumbs()
+watch(
+  breadcrumbs,
+  (newBreadcrumbs) => {
+    setBreadcrumbs(newBreadcrumbs)
+  },
+  { immediate: true }
+)
+
 </script>
 <template>
   <div class="mx-auto w-full max-w-[1360px] p-2 sm:p-4 lg:p-8">
diff --git a/web/site/app/utils/setBreadcrumb.ts b/web/site/app/utils/setBreadcrumb.ts
new file mode 100644
index 00000000..41c3856e
--- /dev/null
+++ b/web/site/app/utils/setBreadcrumb.ts
@@ -0,0 +1,5 @@
+import type { BreadcrumbLink } from '#ui/types'
+export function setBreadcrumbs (breadcrumbs: BreadcrumbLink[]) {
+  const route = useRoute()
+  route.meta.breadcrumbs = breadcrumbs
+}
diff --git a/web/site/nuxt.config.ts b/web/site/nuxt.config.ts
index c4af1f22..481702ff 100644
--- a/web/site/nuxt.config.ts
+++ b/web/site/nuxt.config.ts
@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import type { BreadcrumbLink } from '#ui/types'
 export default defineNuxtConfig({
   devtools: { enabled: false },
   ssr: true,
@@ -131,3 +132,8 @@ export default defineNuxtConfig({
     id: 'G-GKRC2V8PT4'
   }
 })
+declare module '#app' {
+  interface PageMeta {
+    breadcrumbs?: BreadcrumbLink[]
+  }
+}

From e4b386791ebe29d202b05d62529f6af488a7075e Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Fri, 29 Nov 2024 14:03:09 -0800
Subject: [PATCH 2/8] responsive breadcrum

---
 web/site/app/components/Sbc/Breadcrumb.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
index 093e35dd..b822c6d7 100644
--- a/web/site/app/components/Sbc/Breadcrumb.vue
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -25,7 +25,7 @@ function resolveBackHref () {
 </script>
 <template>
   <div class="bg-bcGovColor-nonClickable">
-    <div class="mx-auto flex max-w-full items-center divide-x divide-gray-300 px-4 py-2">
+    <div class="mx-auto flex max-w-full flex-wrap items-center divide-x divide-gray-300 px-4 py-2 sm:divide-x-0">
       <UButton
         class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
         color="white"
@@ -38,7 +38,7 @@ function resolveBackHref () {
       <UBreadcrumb
         :links="breadcrumbs"
         :aria-label="$t('ConnectBreadcrumb.arialabel')"
-        class="pl-3"
+        class="flex min-w-0 flex-wrap items-center gap-x-1.5 pl-3 text-xs leading-6 text-white"
         :ui="{
           li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
           base: 'flex items-center gap-x-1.5 group font-normal min-w-0',

From 0a0ae658b8e597f130d00fbfce73d46eb17d3fd7 Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Fri, 29 Nov 2024 15:51:35 -0800
Subject: [PATCH 3/8] fix imports

---
 web/site/app/pages/index.vue              | 1 +
 web/site/app/pages/products/[...slug].vue | 1 +
 web/site/app/pages/products/index.vue     | 1 +
 3 files changed, 3 insertions(+)

diff --git a/web/site/app/pages/index.vue b/web/site/app/pages/index.vue
index b446bd3f..68173126 100644
--- a/web/site/app/pages/index.vue
+++ b/web/site/app/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
 const { t } = useI18n()
 useHead({
   title: t('page.home.title')
diff --git a/web/site/app/pages/products/[...slug].vue b/web/site/app/pages/products/[...slug].vue
index 6c7bb727..3950a4d5 100644
--- a/web/site/app/pages/products/[...slug].vue
+++ b/web/site/app/pages/products/[...slug].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
 
 definePageMeta({
   layout: 'docs'
diff --git a/web/site/app/pages/products/index.vue b/web/site/app/pages/products/index.vue
index 94cce29d..d5a22429 100644
--- a/web/site/app/pages/products/index.vue
+++ b/web/site/app/pages/products/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useBreadcrumbs } from '~/composables/sbcBreadcrumb'
+import { setBreadcrumbs } from '~/utils/setBreadcrumb'
 const { t, locale } = useI18n()
 useHead({
   title: t('page.products.title')

From 684ea27d3badb2c8c84a7650795b873132fd776e Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Mon, 9 Dec 2024 16:13:17 -0800
Subject: [PATCH 4/8] screen setup for breadcrumbs

---
 web/site/app/app.vue                       | 2 +-
 web/site/app/components/Sbc/Breadcrumb.vue | 8 +++++---
 web/site/app/composables/sbcBreadcrumb.ts  | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/site/app/app.vue b/web/site/app/app.vue
index 768b75d7..b7730973 100644
--- a/web/site/app/app.vue
+++ b/web/site/app/app.vue
@@ -83,7 +83,7 @@ provide('footerHeight', footerHeight)
         $route.path.includes('dashboard') ? dashboardNavItems : undefined
       "
     />
-    <SbcBreadcrumb />
+    <SbcBreadcrumb class="sticky inset-x-0 top-16 z-40" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
index b822c6d7..c507df48 100644
--- a/web/site/app/components/Sbc/Breadcrumb.vue
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -24,12 +24,13 @@ function resolveBackHref () {
 }
 </script>
 <template>
-  <div class="bg-bcGovColor-nonClickable">
-    <div class="mx-auto flex max-w-full flex-wrap items-center divide-x divide-gray-300 px-4 py-2 sm:divide-x-0">
+  <div class="bg-bcGovColor-nonClickable 2xl: left-1 sm:px-4">
+    <div class="m-auto flex w-full max-w-[1312px] items-center justify-between">
+    <div class="flex h-10 min-h-10 items-center">
       <UButton
         class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
         color="white"
-        :disabled="breadcrumbs.length < 2"
+        :disabled="breadcrumbs.length <= 2"
         icon="i-mdi-arrow-left"
         :aria-label="$t('ConnectBreadcrumb.backBtn')"
         data-cy="crumb-back"
@@ -52,6 +53,7 @@ function resolveBackHref () {
           },
         }"
       />
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/site/app/composables/sbcBreadcrumb.ts b/web/site/app/composables/sbcBreadcrumb.ts
index a0371bd4..655d6deb 100644
--- a/web/site/app/composables/sbcBreadcrumb.ts
+++ b/web/site/app/composables/sbcBreadcrumb.ts
@@ -7,7 +7,7 @@ export function useBreadcrumbs () {
 
   const breadcrumbs = computed(() => {
     const bc = [
-      { label: t('sbcBreadcrumb.default'), to: '/' }
+      { label: t('sbcBreadcrumb.default'), to: 'https://bcregistry.gov.bc.ca/' }
     ]
     bc.push({ label: t('sbcBreadcrumb.sbcHome'), to: '/' })
     // Check for /products

From ed1af9257c58b42a5ecd6100cd28337955bb77e6 Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Mon, 9 Dec 2024 16:39:35 -0800
Subject: [PATCH 5/8] added divider

---
 web/site/app/components/Sbc/Breadcrumb.vue | 57 +++++++++++-----------
 web/site/app/components/Sbc/Footer.vue     |  2 +-
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
index c507df48..c3dc2d63 100644
--- a/web/site/app/components/Sbc/Breadcrumb.vue
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -24,35 +24,36 @@ function resolveBackHref () {
 }
 </script>
 <template>
-  <div class="bg-bcGovColor-nonClickable 2xl: left-1 sm:px-4">
+  <div class="2xl: left-1 bg-bcGovColor-nonClickable sm:px-4">
     <div class="m-auto flex w-full max-w-[1312px] items-center justify-between">
-    <div class="flex h-10 min-h-10 items-center">
-      <UButton
-        class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
-        color="white"
-        :disabled="breadcrumbs.length <= 2"
-        icon="i-mdi-arrow-left"
-        :aria-label="$t('ConnectBreadcrumb.backBtn')"
-        data-cy="crumb-back"
-        :to="resolveBackHref()"
-      />
-      <UBreadcrumb
-        :links="breadcrumbs"
-        :aria-label="$t('ConnectBreadcrumb.arialabel')"
-        class="flex min-w-0 flex-wrap items-center gap-x-1.5 pl-3 text-xs leading-6 text-white"
-        :ui="{
-          li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
-          base: 'flex items-center gap-x-1.5 group font-normal min-w-0',
-          label: 'block truncate tracking-wide',
-          active: 'text-white',
-          inactive: 'text-white underline hover:text-white',
-          icon: {
-            base: 'flex-shrink-0 w-3 h-3 text-white',
-            active: '',
-            inactive: '',
-          },
-        }"
-      />
+      <div class="flex h-10 min-h-10 items-center">
+        <UButton
+          class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
+          color="white"
+          :disabled="breadcrumbs.length <= 2"
+          icon="i-mdi-arrow-left"
+          :aria-label="$t('sbcBreadcrumb.backBtn')"
+          data-cy="crumb-back"
+          :to="resolveBackHref()"
+        />
+        <span class="text-white">|</span>
+        <UBreadcrumb
+          :links="breadcrumbs"
+          :aria-label="$t('sbcBreadcrumb.arialabel')"
+          class="flex min-w-0 flex-wrap items-center gap-x-1.5 pl-3 text-xs leading-6 text-white"
+          :ui="{
+            li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
+            base: 'flex items-center gap-x-1.5 group font-normal min-w-0',
+            label: 'block truncate tracking-wide',
+            active: 'text-white',
+            inactive: 'text-white underline hover:text-white',
+            icon: {
+              base: 'flex-shrink-0 w-3 h-3 text-white',
+              active: '',
+              inactive: '',
+            },
+          }"
+        />
       </div>
     </div>
   </div>
diff --git a/web/site/app/components/Sbc/Footer.vue b/web/site/app/components/Sbc/Footer.vue
index 74a00304..3e735919 100644
--- a/web/site/app/components/Sbc/Footer.vue
+++ b/web/site/app/components/Sbc/Footer.vue
@@ -20,7 +20,7 @@ const links = [
     target: '_blank'
   },
   {
-    label: 'Hours of Availability',
+    label: 'SbcFooter.hours',
     to: 'https://www2.gov.bc.ca/gov/content?id=C41D8179671441B2BAA3BDDD3D89C9A9',
     target: '_blank'
   },

From 5ab7d1d40e7bbbb18f639e8fb559077bb5f4aa84 Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Mon, 9 Dec 2024 17:01:58 -0800
Subject: [PATCH 6/8] breadcrumb compute

---
 web/site/app/components/Sbc/Breadcrumb.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
index c3dc2d63..47633188 100644
--- a/web/site/app/components/Sbc/Breadcrumb.vue
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -22,6 +22,9 @@ function resolveBackHref () {
     return ''
   }
 }
+const isBackButtonDisabled = computed(() => {
+  return breadcrumbs.value.length <= 2
+})
 </script>
 <template>
   <div class="2xl: left-1 bg-bcGovColor-nonClickable sm:px-4">
@@ -30,7 +33,7 @@ function resolveBackHref () {
         <UButton
           class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
           color="white"
-          :disabled="breadcrumbs.length <= 2"
+          :disabled="isBackButtonDisabled"
           icon="i-mdi-arrow-left"
           :aria-label="$t('sbcBreadcrumb.backBtn')"
           data-cy="crumb-back"

From 01fd2ed89acc2c7a712c81fdf417a30514dcf5cf Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Mon, 9 Dec 2024 17:42:33 -0800
Subject: [PATCH 7/8] breadcrumb Name Update

---
 web/site/app/composables/sbcBreadcrumb.ts | 4 ++--
 web/site/app/locales/en-CA.ts             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/site/app/composables/sbcBreadcrumb.ts b/web/site/app/composables/sbcBreadcrumb.ts
index 655d6deb..5be7e1d8 100644
--- a/web/site/app/composables/sbcBreadcrumb.ts
+++ b/web/site/app/composables/sbcBreadcrumb.ts
@@ -12,11 +12,11 @@ export function useBreadcrumbs () {
     bc.push({ label: t('sbcBreadcrumb.sbcHome'), to: '/' })
     // Check for /products
     if (route.path.includes('/products') && !route.path.includes('/get-started')) {
-      bc.push({ label: t('sbcBreadcrumb.sbcProducts'), to: localePath('/products') })
+      bc.push({ label: t('sbcBreadcrumb.sbcProductslist'), to: localePath('/products') })
     }
     // Check for /products/get-started and include sub-paths like /account-setup
     if (route.path.includes('/products/get-started')) {
-      bc.push({ label: t('sbcBreadcrumb.sbcDocs'), to: localePath('/products/get-started') })
+      bc.push({ label: t('sbcBreadcrumb.sbcProducts'), to: localePath('/products/get-started') })
     }
 
     return bc
diff --git a/web/site/app/locales/en-CA.ts b/web/site/app/locales/en-CA.ts
index a59afd4f..adc2bde1 100644
--- a/web/site/app/locales/en-CA.ts
+++ b/web/site/app/locales/en-CA.ts
@@ -25,8 +25,8 @@ export default {
     backBtn: 'Go Back',
     arialabel: 'Breadcrumb',
     sbcHome: 'Service BC Connect',
-    sbcProducts: 'Products',
-    sbcDocs: 'Documentation'
+    sbcProductslist: 'Products List',
+    sbcProducts: 'Products'
   },
   page: {
     notFound: {

From afcc0f0373e88384ddb4f8be8b9cd90a5be1c9b6 Mon Sep 17 00:00:00 2001
From: Rajandeep <rajandeep.kaur@gov.bc.ca>
Date: Tue, 10 Dec 2024 09:48:39 -0800
Subject: [PATCH 8/8] updated computation

---
 web/site/app/components/Sbc/Breadcrumb.vue | 29 +++++++---------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/web/site/app/components/Sbc/Breadcrumb.vue b/web/site/app/components/Sbc/Breadcrumb.vue
index 47633188..9e6287ed 100644
--- a/web/site/app/components/Sbc/Breadcrumb.vue
+++ b/web/site/app/components/Sbc/Breadcrumb.vue
@@ -1,30 +1,19 @@
 <script setup lang="ts">
 import type { BreadcrumbLink } from '#ui/types'
 const { t } = useI18n()
+const route = useRoute()
 
-const breadcrumbs = computed<BreadcrumbLink[]>(() => {
-  const route = useRoute()
+const breadcrumbs = computed<BreadcrumbLink[]>(() =>
+  route.meta.breadcrumbs || [{ label: t('sbcBreadcrumb.default') }]
+)
 
-  if (route.meta.breadcrumbs) {
-    return route.meta.breadcrumbs
-  } else {
-    return [{ label: t('sbcBreadcrumb.default') }]
-  }
+const resolveBackHref = computed(() => {
+  const bc = breadcrumbs.value
+  return bc.length > 1 ? bc[bc.length - 2]?.to || bc[bc.length - 2]?.href : ''
 })
 
-function resolveBackHref () {
-  const bcLength = breadcrumbs.value.length
+const isBackButtonDisabled = computed(() => breadcrumbs.value.length <= 2)
 
-  if (bcLength > 1) {
-    // return the second to last breadcrumb link
-    return breadcrumbs.value[bcLength - 2]?.to ?? breadcrumbs.value[bcLength - 2]?.href
-  } else {
-    return ''
-  }
-}
-const isBackButtonDisabled = computed(() => {
-  return breadcrumbs.value.length <= 2
-})
 </script>
 <template>
   <div class="2xl: left-1 bg-bcGovColor-nonClickable sm:px-4">
@@ -37,7 +26,7 @@ const isBackButtonDisabled = computed(() => {
           icon="i-mdi-arrow-left"
           :aria-label="$t('sbcBreadcrumb.backBtn')"
           data-cy="crumb-back"
-          :to="resolveBackHref()"
+          :to="resolveBackHref"
         />
         <span class="text-white">|</span>
         <UBreadcrumb