Fix: Breadcrumb not displayed on the header layout (#32)

* Fix: Breadcrumb not displayed on the header layout

* separating breadcrumb into it's own component

* Adding sidebar layout back

* fixing formatting

---------

Co-authored-by: Tony Lea <[email protected]>

Author: fftfaisal

resources/js/components/AppHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
@@ -76,7 +77,7 @@ const rightNavItems: NavItem[] = [
                             <SheetHeader class="flex justify-start text-left">
                                 <AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
                             </SheetHeader>
-                            <div class="flex flex-col justify-between h-full space-y-4 py-6 flex-1">
+                            <div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
                                 <nav class="-mx-3 space-y-1">
                                     <Link
                                         v-for="item in mainNavItems"

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,32 @@
+<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>