diff --git a/ui/src/components/BreadcrumbBar.tsx b/ui/src/components/BreadcrumbBar.tsx index a93d96c8..c4523d9f 100644 --- a/ui/src/components/BreadcrumbBar.tsx +++ b/ui/src/components/BreadcrumbBar.tsx @@ -2,6 +2,7 @@ import { Link } from "@/lib/router"; import { Menu } from "lucide-react"; import { useBreadcrumbs } from "../context/BreadcrumbContext"; import { useSidebar } from "../context/SidebarContext"; +import { useCompany } from "../context/CompanyContext"; import { Button } from "@/components/ui/button"; import { Breadcrumb, @@ -12,10 +13,12 @@ import { BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { Fragment } from "react"; +import { PluginSlotOutlet } from "@/plugins/slots"; export function BreadcrumbBar() { const { breadcrumbs } = useBreadcrumbs(); const { toggleSidebar, isMobile } = useSidebar(); + const { selectedCompanyId, selectedCompany } = useCompany(); if (breadcrumbs.length === 0) return null; @@ -31,43 +34,60 @@ export function BreadcrumbBar() { ); + const globalToolbarSlots = ( + + ); + // Single breadcrumb = page title (uppercase) if (breadcrumbs.length === 1) { return ( -
+
{menuButton} -

- {breadcrumbs[0].label} -

+
+

+ {breadcrumbs[0].label} +

+
+ {globalToolbarSlots}
); } // Multiple breadcrumbs = breadcrumb trail return ( -
+
{menuButton} - - - {breadcrumbs.map((crumb, i) => { - const isLast = i === breadcrumbs.length - 1; - return ( - - {i > 0 && } - - {isLast || !crumb.href ? ( - {crumb.label} - ) : ( - - {crumb.label} - - )} - - - ); - })} - - +
+ + + {breadcrumbs.map((crumb, i) => { + const isLast = i === breadcrumbs.length - 1; + return ( + + {i > 0 && } + + {isLast || !crumb.href ? ( + {crumb.label} + ) : ( + + {crumb.label} + + )} + + + ); + })} + + +
+ {globalToolbarSlots}
); }