mejorar scroll en crumbs largos

This commit is contained in:
Cat /dev/Nulo 2023-08-31 09:41:09 -03:00
parent a8e7bd38b3
commit 53679215a4

View file

@ -10,6 +10,7 @@
import { pageStore } from "../lib/makeYdocStore"; import { pageStore } from "../lib/makeYdocStore";
import { derived } from "svelte/store"; import { derived } from "svelte/store";
import { getTitle } from "../lib/getTitle"; import { getTitle } from "../lib/getTitle";
import { onMount, tick } from "svelte";
export let worldId: string; export let worldId: string;
export let pageId: string; export let pageId: string;
@ -52,6 +53,24 @@
}) })
.catch((error) => (state = { error })); .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> </script>
<nav> <nav>
@ -69,22 +88,28 @@
<!-- https://devdojo.com/pines/docs/breadcrumbs --> <!-- https://devdojo.com/pines/docs/breadcrumbs -->
<div <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 <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" 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} {#each $pageBreadcrumbs as crumb, index}
<li> <li
class:anchor-none={index !== $pageBreadcrumbs.length - 1}
class:anchor-auto={index === $pageBreadcrumbs.length - 1}
>
<a <a
href={inject(routes.Page, { worldId, pageId: crumb })} 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} class:active-breadcrumb={crumb === pageId}
>{$crumbsTitles[index] || crumb}</a >{$crumbsTitles[index] || crumb}</a
> >
</li> </li>
{#if index !== $pageBreadcrumbs.length - 1} {#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} {/if}
{/each} {/each}
</ol> </ol>
@ -102,4 +127,11 @@
nav a { nav a {
color: inherit; color: inherit;
} }
.anchor-none {
overflow-anchor: none;
}
.anchor-auto {
overflow-anchor: auto;
}
</style> </style>