feat(BreadcrumbHeader): add anchor to scroll to the section from the breadcrumb

This commit is contained in:
Ilia Mashkov
2026-02-10 21:19:30 +03:00
parent 0eebe03bf8
commit 8aad8942fc

View File

@@ -3,6 +3,7 @@
Fixed header for breadcrumbs navigation for sections in the page Fixed header for breadcrumbs navigation for sections in the page
--> -->
<script lang="ts"> <script lang="ts">
import { smoothScroll } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { import {
fly, fly,
@@ -39,10 +40,10 @@ import { scrollBreadcrumbsStore } from '../../model';
<span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider"> <span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
{String(item.index).padStart(2, '0')} {String(item.index).padStart(2, '0')}
</span> </span>
<a href={`#${item.id}`} use:smoothScroll>
{@render item.title({ {@render item.title({
className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900', className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
})} })}</a>
{#if idx < scrollBreadcrumbsStore.items.length - 1} {#if idx < scrollBreadcrumbsStore.items.length - 1}
<div class="flex items-center gap-0.5 opacity-40"> <div class="flex items-center gap-0.5 opacity-40">