ed56c4201f
- 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
60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
|
|
function setLinks() {
|
|
if (route.path === '/') {
|
|
return [{ title: 'Home', href: '/' }]
|
|
}
|
|
|
|
const segments = route.path.split('/').filter((item) => item !== '')
|
|
|
|
const breadcrumbs = segments.map((item, index) => {
|
|
// 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())
|
|
.join(' ')
|
|
|
|
return {
|
|
title,
|
|
href: `/${segments.slice(0, index + 1).map(seg => seg.split('?')[0] || seg).join('/')}`,
|
|
}
|
|
})
|
|
|
|
return [{ title: 'Home', href: '/' }, ...breadcrumbs]
|
|
}
|
|
|
|
const links = ref<
|
|
{
|
|
title: string
|
|
href: string
|
|
}[]
|
|
>(setLinks())
|
|
|
|
watch(
|
|
() => route.path,
|
|
(val) => {
|
|
if (val) {
|
|
links.value = setLinks()
|
|
}
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<header class="h-53px bg-background sticky top-0 z-10 flex items-center gap-4 border-b px-4 md:px-6">
|
|
<div class="flex w-full items-center gap-4">
|
|
<SidebarTrigger />
|
|
<Separator orientation="vertical" class="h-4" />
|
|
<PubBaseBreadcrumb :links="links" />
|
|
</div>
|
|
<div class="ml-auto">
|
|
<slot />
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped></style>
|