frontend-svelte/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte

<!--
    Component: BreadcrumbHeader
    Fixed header for breadcrumbs navigation for sections in the page
-->
<script lang="ts">
import { smoothScroll } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    fly,
    slide,
} from 'svelte/transition';
import { scrollBreadcrumbsStore } from '../../model';
</script>

{#if scrollBreadcrumbsStore.items.length > 0}
    <div
        transition:slide={{ duration: 200 }}
        class="
            fixed top-0 left-0 right-0 z-100
            backdrop-blur-lg bg-background-20
            border-b border-border-muted
            shadow-[0_1px_3px_rgba(0,0,0,0.04)]
            h-10 sm:h-12
        "
    >
        <div class="max-w-8xl mx-auto px-4 sm:px-6 h-full flex items-center gap-2 sm:gap-4">
            <h1 class={cn('barlow font-extralight text-sm sm:text-base')}>
                GLYPHDIFF
            </h1>

            <div class="h-3.5 sm:h-4 w-px bg-border-subtle hidden sm:block"></div>

            <nav class="flex items-center gap-2 sm:gap-3 overflow-x-auto scrollbar-hide flex-1">
                {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
                    <div
                        in:fly={{ duration: 300, y: -10, x: 100, opacity: 0 }}
                        out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
                        class="flex items-center gap-2 sm:gap-3 whitespace-nowrap shrink-0"
                    >
                        <span class="font-mono text-[8px] sm:text-[9px] text-text-muted tracking-wider">
                            {String(item.index).padStart(2, '0')}
                        </span>
                        <a href={`#${item.id}`} use:smoothScroll>
                            {@render item.title({
    className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-foreground',
})}</a>

                        {#if idx < scrollBreadcrumbsStore.items.length - 1}
                            <div class="flex items-center gap-0.5 opacity-40">
                                <div class="w-1 h-px bg-text-muted"></div>
                                <div class="w-1 h-px bg-text-muted"></div>
                                <div class="w-1 h-px bg-text-muted"></div>
                            </div>
                        {/if}
                    </div>
                {/each}
            </nav>

            <div class="flex items-center gap-1.5 sm:gap-2 opacity-50 ml-auto">
                <div class="w-px h-2 sm:h-2.5 bg-border-subtle hidden sm:block"></div>
                <span class="font-mono text-[7px] sm:text-[8px] text-text-muted tracking-wider">
                    [{scrollBreadcrumbsStore.items.length}]
                </span>
            </div>
        </div>
    </div>
{/if}

<style>
/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
</style>