Nulo/schreiben
1
0
Fork 0
Code Issues 13 Pull requests Packages Projects Releases Wiki Activity

breadcrumbs dark mode

Browse source 
fixes #26
This commit is contained in:
Cat /dev/Nulo 2023-08-31 09:50:03 -03:00
parent 2d0929c1fc
commit 838e3323ce
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/views/Page/Breadcrumbs.svelte
View file

@ -47,23 +47,25 @@
<!-- https://devdojo.com/pines/docs/breadcrumbs --> <!-- https://devdojo.com/pines/docs/breadcrumbs -->
<div <div
class="flex justify-between overflow-x-auto 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 dark:border-neutral-700"
bind:this={breadcrumbsEl} 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 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
> >
{#each $pageBreadcrumbs as crumb, index} {#each $pageBreadcrumbs as crumb, index}
<li> <li>
<a <a
href={inject(routes.Page, { worldId, pageId: crumb })} href={inject(routes.Page, { worldId, pageId: crumb })}
class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none" class="font-norma inline-flex items-center text-ellipsis whitespace-nowrap py-1 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="h-5 w-5 fill-current text-gray-400/70 dark:text-gray-500"
/>
{/if} {/if}
{/each} {/each}
</ol> </ol>