separating breadcrumb into it's own component

Author: tnylea

resources/js/components/AppHeader.vue

@@ -2,6 +2,7 @@
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import {
@@ -19,14 +20,6 @@ import type { BreadcrumbItem, NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
-import {
-    Breadcrumb,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-    BreadcrumbItem as BreadcrumbItemComponent
-} from '@/components/ui/breadcrumb';
 
 interface Props {
     breadcrumbs?: BreadcrumbItem[];
@@ -190,23 +183,7 @@ const rightNavItems: NavItem[] = [
 
         <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
             <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <template v-for="(item, index) in breadcrumbs" :key="index">
-                            <BreadcrumbItemComponent>
-                                <template v-if="index === breadcrumbs.length - 1">
-                                    <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                                </template>
-                                <template v-else>
-                                    <BreadcrumbLink :href="item.href">
-                                        {{ item.title }}
-                                    </BreadcrumbLink>
-                                </template>
-                            </BreadcrumbItemComponent>
-                            <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-                        </template>
-                    </BreadcrumbList>
-                </Breadcrumb>
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </div>
         </div>
     </div>

resources/js/components/AppSidebarHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItemType } from '@/types';
 
@@ -15,23 +15,7 @@ defineProps<{
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
             <template v-if="breadcrumbs.length > 0">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <template v-for="(item, index) in breadcrumbs" :key="index">
-                            <BreadcrumbItem>
-                                <template v-if="index === breadcrumbs.length - 1">
-                                    <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                                </template>
-                                <template v-else>
-                                    <BreadcrumbLink :href="item.href">
-                                        {{ item.title }}
-                                    </BreadcrumbLink>
-                                </template>
-                            </BreadcrumbItem>
-                            <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-                        </template>
-                    </BreadcrumbList>
-                </Breadcrumb>
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>
         </div>
     </header>

resources/js/components/Breadcrumbs.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+
+    import {
+        Breadcrumb,
+        BreadcrumbItem,
+        BreadcrumbLink,
+        BreadcrumbList,
+        BreadcrumbPage,
+        BreadcrumbSeparator
+    } from '@/components/ui/breadcrumb';
+
+    interface BreadcrumbItem {
+        title: string;
+        href?: string;
+    }
+
+    defineProps<{
+        breadcrumbs: BreadcrumbItem[];
+    }>();
+</script>
+
+<template>
+  <Breadcrumb>
+        <BreadcrumbList>
+            <template v-for="(item, index) in breadcrumbs" :key="index">
+                <BreadcrumbItem>
+                    <template v-if="index === breadcrumbs.length - 1">
+                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
+                    </template>
+                    <template v-else>
+                        <BreadcrumbLink :href="item.href">
+                            {{ item.title }}
+                        </BreadcrumbLink>
+                    </template>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+            </template>
+        </BreadcrumbList>
+    </Breadcrumb>
+</template>

resources/js/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
 import type { BreadcrumbItemType } from '@/types';
 
 interface Props {