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

@@ -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 />

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>