Dev cleaning (#106)

app/components/layout/Header.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import ThemeToggle from "./ThemeToggle.vue"
+
+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" />
+      <PubMyUiBreadcrumb :links="links" />
+    </div>
+     <div class="ml-auto flex items-center gap-2">
+       <slot />
+       <ThemeToggle />
+     </div>
+  </header>
+</template>
+
+<style scoped></style>