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 {
|
interface BreadcrumbProps {
|
||||||
items: BreadcrumbItem[]
|
items: BreadcrumbItem[]
|
||||||
className?: string
|
className?: string
|
||||||
|
onNavigate?: (href: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Breadcrumb({ items, className }: BreadcrumbProps) {
|
export function Breadcrumb({ items, className, onNavigate }: BreadcrumbProps) {
|
||||||
return (
|
return (
|
||||||
<nav aria-label="Breadcrumb" className={className}>
|
<nav aria-label="Breadcrumb" className={className}>
|
||||||
<ol className={styles.list}>
|
<ol className={styles.list}>
|
||||||
@@ -22,7 +23,11 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
|
|||||||
{isLast ? (
|
{isLast ? (
|
||||||
<span className={styles.active}>{item.label}</span>
|
<span className={styles.active}>{item.label}</span>
|
||||||
) : item.href ? (
|
) : 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}
|
{item.label}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ interface TopBarProps {
|
|||||||
user?: { name: string }
|
user?: { name: string }
|
||||||
userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[]
|
userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[]
|
||||||
onLogout?: () => void
|
onLogout?: () => void
|
||||||
|
onNavigate?: (href: string) => void
|
||||||
className?: string
|
className?: string
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
}
|
}
|
||||||
@@ -24,6 +25,7 @@ export function TopBar({
|
|||||||
user,
|
user,
|
||||||
userMenuItems,
|
userMenuItems,
|
||||||
onLogout,
|
onLogout,
|
||||||
|
onNavigate,
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
}: TopBarProps) {
|
}: TopBarProps) {
|
||||||
@@ -33,7 +35,7 @@ export function TopBar({
|
|||||||
return (
|
return (
|
||||||
<header className={`${styles.topbar} ${className ?? ''}`}>
|
<header className={`${styles.topbar} ${className ?? ''}`}>
|
||||||
{/* Left: Breadcrumb */}
|
{/* Left: Breadcrumb */}
|
||||||
<Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} />
|
<Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} onNavigate={onNavigate} />
|
||||||
|
|
||||||
{/* Center: consumer-provided controls */}
|
{/* Center: consumer-provided controls */}
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
Reference in New Issue
Block a user