mejorar scroll en crumbs largos
This commit is contained in:
parent
a8e7bd38b3
commit
53679215a4
1 changed files with 36 additions and 4 deletions
|
@ -10,6 +10,7 @@
|
|||
import { pageStore } from "../lib/makeYdocStore";
|
||||
import { derived } from "svelte/store";
|
||||
import { getTitle } from "../lib/getTitle";
|
||||
import { onMount, tick } from "svelte";
|
||||
|
||||
export let worldId: string;
|
||||
export let pageId: string;
|
||||
|
@ -52,6 +53,24 @@
|
|||
})
|
||||
.catch((error) => (state = { error }));
|
||||
}
|
||||
|
||||
let breadcrumbsEl: HTMLDivElement;
|
||||
const crumbsScrollToEnd = async () => {
|
||||
await tick();
|
||||
breadcrumbsEl?.scroll({
|
||||
left: breadcrumbsEl.scrollWidth,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
crumbsScrollToEnd();
|
||||
});
|
||||
$: {
|
||||
$crumbsTitles;
|
||||
$pageBreadcrumbs;
|
||||
crumbsScrollToEnd();
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
|
@ -69,22 +88,28 @@
|
|||
|
||||
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
|
||||
<div
|
||||
class="flex justify-between rounded-md border border-neutral-200/60 px-3.5 py-1"
|
||||
class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
|
||||
bind:this={breadcrumbsEl}
|
||||
>
|
||||
<ol
|
||||
class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
|
||||
>
|
||||
{#each $pageBreadcrumbs as crumb, index}
|
||||
<li>
|
||||
<li
|
||||
class:anchor-none={index !== $pageBreadcrumbs.length - 1}
|
||||
class:anchor-auto={index === $pageBreadcrumbs.length - 1}
|
||||
>
|
||||
<a
|
||||
href={inject(routes.Page, { worldId, pageId: crumb })}
|
||||
class="inline-flex items-center py-1 font-normal hover:text-neutral-900 focus:outline-none"
|
||||
class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
|
||||
class:active-breadcrumb={crumb === pageId}
|
||||
>{$crumbsTitles[index] || crumb}</a
|
||||
>
|
||||
</li>
|
||||
{#if index !== $pageBreadcrumbs.length - 1}
|
||||
<ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
|
||||
<ChevronRight
|
||||
class="anchor-none h-5 w-5 fill-current text-gray-400/70"
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</ol>
|
||||
|
@ -102,4 +127,11 @@
|
|||
nav a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.anchor-none {
|
||||
overflow-anchor: none;
|
||||
}
|
||||
.anchor-auto {
|
||||
overflow-anchor: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue