From ed56c4201f02374d052b634cbefb9c99c0c713aa Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 17 Sep 2025 15:57:21 +0700
Subject: [PATCH] feat(breadcrumb): add breadcrumb component and update header
 integration

- Implement new breadcrumb component with proper routing handling
- Update header to use new breadcrumb component
- Optimize nuxt config for SPA with router and rendering settings
---
 app/components/layout/Header.vue             | 14 +++++----
 app/components/pub/base/breadcrumb/index.vue | 33 ++++++++++++++++++++
 nuxt.config.ts                               | 22 +++++++++++++
 3 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 app/components/pub/base/breadcrumb/index.vue

diff --git a/app/components/layout/Header.vue b/app/components/layout/Header.vue
index 369b29ea..19c87540 100644
--- a/app/components/layout/Header.vue
+++ b/app/components/layout/Header.vue
@@ -2,14 +2,16 @@
 const route = useRoute()
 
 function setLinks() {
-  if (route.fullPath === '/') {
+  if (route.path === '/') {
     return [{ title: 'Home', href: '/' }]
   }
 
-  const segments = route.fullPath.split('/').filter((item) => item !== '')
+  const segments = route.path.split('/').filter((item) => item !== '')
 
   const breadcrumbs = segments.map((item, index) => {
-    const str = item.replace(/-/g, ' ')
+    // Bersihkan query parameters dari segment jika ada
+    const cleanItem = item.split('?')[0] || item
+    const str = cleanItem.replace(/-/g, ' ')
     const title = str
       .split(' ')
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
@@ -17,7 +19,7 @@ function setLinks() {
 
     return {
       title,
-      href: `/${segments.slice(0, index + 1).join('/')}`,
+      href: `/${segments.slice(0, index + 1).map(seg => seg.split('?')[0] || seg).join('/')}`,
     }
   })
 
@@ -32,7 +34,7 @@ const links = ref<
 >(setLinks())
 
 watch(
-  () => route.fullPath,
+  () => route.path,
   (val) => {
     if (val) {
       links.value = setLinks()
@@ -46,7 +48,7 @@ watch(
     <div class="flex w-full items-center gap-4">
       <SidebarTrigger />
       <Separator orientation="vertical" class="h-4" />
-      <!-- <BaseBreadcrumbCustom :links="links" /> -->
+      <PubBaseBreadcrumb :links="links" />
     </div>
     <div class="ml-auto">
       <slot />
diff --git a/app/components/pub/base/breadcrumb/index.vue b/app/components/pub/base/breadcrumb/index.vue
new file mode 100644
index 00000000..306ffe5b
--- /dev/null
+++ b/app/components/pub/base/breadcrumb/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '~/components/pub/ui/breadcrumb'
+
+const props = defineProps<{
+  links: {
+    title: string
+    href: string
+  }[]
+}>()
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem v-for="(link, index) in props.links" :key="link.href">
+        <BreadcrumbLink as-child>
+          <NuxtLink :to="link.href">
+            {{ link.title }}
+          </NuxtLink>
+        </BreadcrumbLink>
+
+        <BreadcrumbSeparator v-if="index < props.links.length - 1" />
+      </BreadcrumbItem>
+    </BreadcrumbList>
+
+  </Breadcrumb>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fb2ac447..7ad57f5c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,28 @@ export default defineNuxtConfig({
   },
   ssr: false,
 
+  // SPA optimizations
+  router: {
+    options: {
+      hashMode: false, // Use history mode for cleaner URLs
+    },
+  },
+
+  // Enable client-side rendering optimizations
+  nitro: {
+    prerender: {
+      crawlLinks: false, // Disable crawling for SPA
+    },
+  },
+
+  // Optimize app loading
+  app: {
+    head: {
+      viewport: 'width=device-width,initial-scale=1',
+      charset: 'utf-8',
+    },
+  },
+
   modules: [
     '@unocss/nuxt',
     '@vueuse/nuxt',