feat: add onNavigate callback to Breadcrumb for SPA routing
All checks were successful
Build & Publish / publish (push) Successful in 2m1s
All checks were successful
Build & Publish / publish (push) Successful in 2m1s
Breadcrumb used plain <a href> which bypasses React Router's basename, breaking navigation in multi-tenant setups with a base path prefix. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -8,9 +8,10 @@ interface BreadcrumbItem {
|
||||
interface BreadcrumbProps {
|
||||
items: BreadcrumbItem[]
|
||||
className?: string
|
||||
onNavigate?: (href: string) => void
|
||||
}
|
||||
|
||||
export function Breadcrumb({ items, className }: BreadcrumbProps) {
|
||||
export function Breadcrumb({ items, className, onNavigate }: BreadcrumbProps) {
|
||||
return (
|
||||
<nav aria-label="Breadcrumb" className={className}>
|
||||
<ol className={styles.list}>
|
||||
@@ -22,7 +23,11 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
|
||||
{isLast ? (
|
||||
<span className={styles.active}>{item.label}</span>
|
||||
) : item.href ? (
|
||||
<a href={item.href} className={styles.link}>
|
||||
<a
|
||||
href={item.href}
|
||||
className={styles.link}
|
||||
onClick={onNavigate ? (e) => { e.preventDefault(); onNavigate(item.href!) } : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
) : (
|
||||
|
||||
@@ -14,6 +14,7 @@ interface TopBarProps {
|
||||
user?: { name: string }
|
||||
userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[]
|
||||
onLogout?: () => void
|
||||
onNavigate?: (href: string) => void
|
||||
className?: string
|
||||
children?: ReactNode
|
||||
}
|
||||
@@ -24,6 +25,7 @@ export function TopBar({
|
||||
user,
|
||||
userMenuItems,
|
||||
onLogout,
|
||||
onNavigate,
|
||||
className,
|
||||
children,
|
||||
}: TopBarProps) {
|
||||
@@ -33,7 +35,7 @@ export function TopBar({
|
||||
return (
|
||||
<header className={`${styles.topbar} ${className ?? ''}`}>
|
||||
{/* Left: Breadcrumb */}
|
||||
<Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} />
|
||||
<Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} onNavigate={onNavigate} />
|
||||
|
||||
{/* Center: consumer-provided controls */}
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user