rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use name for breadcrump

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-18 09:49:00 +01:00
parent 23dad14320
commit ba73ffca79
3 changed files with 114 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
apps/console/src/layouts/ConsoleLayout.tsx
View File

@@ -15,58 +15,83 @@ import {
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { BreadcrumbProvider, useBreadcrumb } from "@/contexts/BreadcrumbContext";
export default function ConsoleLayout() {
function BreadcrumbNavigation() {
const location = useLocation();
const pathSegments = location.pathname.split("/").filter(Boolean);
const { segments } = useBreadcrumb();
const getBreadcrumbText = (segment: string, path: string) => {
// Check if we have a custom segment name
const fullPath = pathSegments
.slice(0, pathSegments.indexOf(segment) + 1)
.join('/');
// Look for patterns like 'vendors/:id' in our segments
const patternPath = fullPath.replace(/\/[^/]+$/, '/:id');
if (segments[patternPath]) {
return segments[patternPath];
}
// Default to capitalized segment
return segment.charAt(0).toUpperCase() + segment.slice(1);
};
return (
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{pathSegments.map((segment, index) => {
const path = `/${pathSegments.slice(0, index + 1).join("/")}`;
const isLast = index === pathSegments.length - 1;
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{pathSegments.map((segment, index) => {
const path = `/${pathSegments.slice(0, index + 1).join("/")}`;
const isLast = index === pathSegments.length - 1;
return (
<React.Fragment key={path}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>
{segment.charAt(0).toUpperCase() + segment.slice(1)}
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={path}>
{segment.charAt(0).toUpperCase() +
segment.slice(1)}
</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<Outlet />
</div>
</SidebarInset>
</SidebarProvider>
return (
<React.Fragment key={path}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>
{getBreadcrumbText(segment, path)}
</BreadcrumbPage>
) : (
<BreadcrumbLink asChild>
<Link to={path}>
{getBreadcrumbText(segment, path)}
</Link>
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
);
})}
</BreadcrumbList>
</Breadcrumb>
);
}
export default function ConsoleLayout() {
return (
<BreadcrumbProvider>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<BreadcrumbNavigation />
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<Outlet />
</div>
</SidebarInset>
</SidebarProvider>
</BreadcrumbProvider>
);
}