78 lines
2.8 KiB
Svelte
78 lines
2.8 KiB
Svelte
<!--
|
|
Component: BreadcrumbHeader
|
|
Fixed header for breadcrumbs navigation for sections in the page
|
|
-->
|
|
<script lang="ts">
|
|
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-white/20
|
|
border-b border-gray-300/50
|
|
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-gray-300/60 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-gray-400 tracking-wider">
|
|
{String(item.index).padStart(2, '0')}
|
|
</span>
|
|
|
|
{@render item.title({
|
|
className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
|
|
})}
|
|
|
|
{#if idx < scrollBreadcrumbsStore.items.length - 1}
|
|
<div class="flex items-center gap-0.5 opacity-40">
|
|
<div class="w-1 h-px bg-gray-400"></div>
|
|
<div class="w-1 h-px bg-gray-400"></div>
|
|
<div class="w-1 h-px bg-gray-400"></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-gray-300/60 hidden sm:block"></div>
|
|
<span class="font-mono text-[7px] sm:text-[8px] text-gray-400 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>
|