fix(nav): Header-Back-Pfeil als echtes history.back()
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 3m19s

Der Zurück-Pfeil im Header war fest auf "/" verdrahtet und navigierte
forward, nicht backward. Damit ging die Scroll-Position der Origin-Seite
verloren und z. B. Wunschliste -> Rezept -> Zurück landete auf der
Startseite statt zurück auf der Wunschliste.

Jetzt: history.back() (mit goto('/') als Fallback bei leerer History).
SvelteKits eingebaute Scroll-Restoration greift dadurch wieder, und der
Pfeil tut was er optisch verspricht.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-22 09:09:45 +02:00
parent 42b1aed023
commit 4afc597689

View File

@@ -89,6 +89,14 @@
navStore.reset(); navStore.reset();
} }
function goBack() {
if (typeof history !== 'undefined' && history.length > 1) {
history.back();
} else {
void goto('/');
}
}
afterNavigate(() => { afterNavigate(() => {
navStore.reset(); navStore.reset();
navOpen = false; navOpen = false;
@@ -132,9 +140,9 @@
<span class="version" title="Deployment-Tag">{data.version}</span> <span class="version" title="Deployment-Tag">{data.version}</span>
</div> </div>
{:else} {:else}
<a href="/" class="home-back" aria-label="Zurück zur Startseite"> <button type="button" class="home-back" aria-label="Zurück" onclick={goBack}>
<ArrowLeft size={22} strokeWidth={2} /> <ArrowLeft size={22} strokeWidth={2} />
</a> </button>
{/if} {/if}
{#if showHeaderSearch} {#if showHeaderSearch}
<div class="nav-search-wrap" bind:this={navContainer}> <div class="nav-search-wrap" bind:this={navContainer}>
@@ -375,10 +383,15 @@
justify-content: center; justify-content: center;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 0;
border-radius: var(--pill-radius); border-radius: var(--pill-radius);
background: transparent;
color: #2b6a3d; color: #2b6a3d;
text-decoration: none; text-decoration: none;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer;
font: inherit;
padding: 0;
} }
.home-back:hover { .home-back:hover {
background: #f4f8f5; background: #f4f8f5;