Add dynamic breadcrumb navigation and update kanzlei routes under /demo
This commit is contained in:
42
internal_frontend/components/dynamic-breadcrumb.tsx
Normal file
42
internal_frontend/components/dynamic-breadcrumb.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// components/dynamic-breadcrumb.tsx
|
||||
'use client';
|
||||
|
||||
import {usePathname} from 'next/navigation';
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import React from 'react';
|
||||
import {getBreadcrumbs} from "@/utils/BreadcrumbUtils";
|
||||
|
||||
export function DynamicBreadcrumb() {
|
||||
const pathname = usePathname();
|
||||
const breadcrumbs = getBreadcrumbs(pathname);
|
||||
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
{breadcrumbs.map((breadcrumb, index) => (
|
||||
<React.Fragment key={breadcrumb.href}>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
{breadcrumb.isCurrentPage ? (
|
||||
<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
|
||||
) : (
|
||||
<BreadcrumbLink href={breadcrumb.href}>
|
||||
{breadcrumb.label}
|
||||
</BreadcrumbLink>
|
||||
)}
|
||||
</BreadcrumbItem>
|
||||
{index < breadcrumbs.length - 1 && (
|
||||
<BreadcrumbSeparator className="hidden md:block"/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user