45 lines
892 B
Svelte
45 lines
892 B
Svelte
|
<!--
|
||
|
|
Component: NavigationWrapper
|
||
|
|
Wrapper for breadcrumb registration with scroll tracking
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { type Snippet } from 'svelte';
|
||
|
|
import {
|
||
|
|
type NavigationAction,
|
||
|
|
scrollBreadcrumbsStore,
|
||
|
|
} from '../../model';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* Navigation index
|
||
|
|
*/
|
||
|
|
index: number;
|
||
|
|
/**
|
||
|
|
* Navigation title
|
||
|
|
*/
|
||
|
|
title: string;
|
||
|
|
/**
|
||
|
|
* Scroll offset
|
||
|
|
* @default 96
|
||
|
|
*/
|
||
|
|
offset?: number;
|
||
|
|
/**
|
||
|
|
* Content snippet
|
||
|
|
*/
|
||
|
|
content: Snippet<[action: NavigationAction]>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { index, title, offset = 96, content }: Props = $props();
|
||
|
|
|
||
|
|
function registerBreadcrumb(node: HTMLElement) {
|
||
|
|
scrollBreadcrumbsStore.add({ index, title, element: node }, offset);
|
||
|
|
return {
|
||
|
|
destroy() {
|
||
|
|
scrollBreadcrumbsStore.remove(index);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{@render content(registerBreadcrumb)}
|