glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Page): add id and pass it to scrollBreadcrumbStore

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-10 21:18:49 +03:00
parent 2508168a3e
commit 0eebe03bf8
1 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/Page.svelte
View File

@@ -23,9 +23,14 @@ let searchContainer: HTMLElement;
let isExpanded = $state(false); let isExpanded = $state(false);
function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) { function handleTitleStatusChanged(
index: number,
isPast: boolean,
title?: Snippet<[{ className?: string }]>,
id?: string,
) {
if (isPast && title) { if (isPast && title) {
scrollBreadcrumbsStore.add({ index, title }); scrollBreadcrumbsStore.add({ index, title, id });
} else { } else {
scrollBreadcrumbsStore.remove(index); scrollBreadcrumbsStore.remove(index);
} }
@@ -50,7 +55,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4" class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4"
in:fade={{ duration: 500, delay: 150, easing: cubicIn }} in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
> >
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}> <Section class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })} {#snippet icon({ className })}
<CodeIcon class={className} /> <CodeIcon class={className} />
{/snippet} {/snippet}
@@ -62,7 +67,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
<Logo /> <Logo />
</Section> </Section>
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}> <Section
class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
index={1}
id="optical_comparator"
onTitleStatusChange={handleTitleStatusChanged}
>
{#snippet icon({ className })} {#snippet icon({ className })}
<EyeIcon class={className} /> <EyeIcon class={className} />
{/snippet} {/snippet}
@@ -74,7 +84,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
<ComparisonSlider /> <ComparisonSlider />
</Section> </Section>
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}> <Section
class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
index={2}
id="query_module"
onTitleStatusChange={handleTitleStatusChanged}
>
{#snippet icon({ className })} {#snippet icon({ className })}
<ScanSearchIcon class={className} /> <ScanSearchIcon class={className} />
{/snippet} {/snippet}
@@ -86,7 +101,12 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
<FontSearch bind:showFilters={isExpanded} /> <FontSearch bind:showFilters={isExpanded} />
</Section> </Section>
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}> <Section
class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
index={3}
id="sample_set"
onTitleStatusChange={handleTitleStatusChanged}
>
{#snippet icon({ className })} {#snippet icon({ className })}
<LineSquiggleIcon class={className} /> <LineSquiggleIcon class={className} />
{/snippet} {/snippet}