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

feat(BreadcrumbHeader): add a logo and change the animation
All checks were successful
Workflow / build (push) Successful in 55s
Details

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-04 10:49:13 +03:00
parent 69ae955131
commit 2b7f21711b
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
View File

@@ -3,9 +3,11 @@
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 Icon from '@lucide/svelte/icons/align-vertical-justify-center'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { flip } from 'svelte/animate'; import {
import { slide } from 'svelte/transition'; fly,
slide,
} from 'svelte/transition';
import { scrollBreadcrumbsStore } from '../../model'; import { scrollBreadcrumbsStore } from '../../model';
</script> </script>
@@ -21,20 +23,17 @@ import { scrollBreadcrumbsStore } from '../../model';
" "
> >
<div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4"> <div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4">
<div class="flex items-center gap-2.5 opacity-70"> <h1 class={cn('font-[Barlow] font-extralight')}>
<Icon class="size-4 stroke-gray-900 stroke-1" /> GLYPHDIFF
<div class="w-px h-2.5 bg-gray-400/50"></div> </h1>
<span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
nav_trace
</span>
</div>
<div class="h-4 w-px bg-gray-300/60"></div> <div class="h-4 w-px bg-gray-300/60"></div>
<nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1"> <nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1">
{#each scrollBreadcrumbsStore.items as item, idx (item.index)} {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
<div <div
animate:flip={{ duration: 200 }} 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-3 whitespace-nowrap shrink-0" class="flex items-center gap-3 whitespace-nowrap shrink-0"
> >
<span class="font-mono text-[9px] text-gray-400 tracking-wider"> <span class="font-mono text-[9px] text-gray-400 tracking-wider">
@@ -42,7 +41,7 @@ import { scrollBreadcrumbsStore } from '../../model';
</span> </span>
{@render item.title({ {@render item.title({
className: 'font-mono text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900', className: 'text-[10px] md:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
})} })}
{#if idx < scrollBreadcrumbsStore.items.length - 1} {#if idx < scrollBreadcrumbsStore.items.length - 1}