diff --git a/.changeset/add-toc-click-handler.md b/.changeset/add-toc-click-handler.md new file mode 100644 index 00000000..a3eff939 --- /dev/null +++ b/.changeset/add-toc-click-handler.md @@ -0,0 +1,5 @@ +--- +"@ainsleydev/sveltekit-helper": patch +--- + +feat(TableOfContents): Adding onLinkClick callback prop for click events on TOC links. diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte index 730495c4..871289fa 100644 --- a/packages/sveltekit-helper/src/components/TableOfContents.svelte +++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte @@ -36,6 +36,11 @@ export type TableOfContentsProps = { * @default 80 */ scrollOffset?: number; + /** + * Optional callback invoked when a TOC link is clicked. + * Useful for closing a sidebar or drawer on navigation. + */ + onLinkClick?: (event: MouseEvent, item: TOCItem) => void; }; @@ -49,6 +54,7 @@ export type TableOfContentsProps = { contentSelector = '[data-sidebar-content="true"]', headingSelector, scrollOffset = 80, + onLinkClick, }: TableOfContentsProps = $props() let activeId = $state(null) @@ -146,6 +152,7 @@ export type TableOfContentsProps = { class:toc__link--active={activeId === (item.href.startsWith('#') ? item.href.slice(1) : item.href)} href="#{item.href}" + onclick={(e) => onLinkClick?.(e, item)} > {item.label}