refactor(nav): Pfeil-Icon im Header statt großem Zurück-Pill
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s
Der neu eingefügte Admin-Pill war zu prominent für seinen Zweck. Raus damit. Stattdessen zeigt der Haupt-Header auf allen Nicht-Hauptseiten links einen ArrowLeft-Icon-Link zur Startseite — platzsparend und konsistent über alle Sub-Seiten (Admin, Rezept, Preview, Wunschliste…). Auf der Startseite selbst bleibt das „Kochwas"-Wortmarke stehen. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto, afterNavigate } from '$app/navigation';
|
||||
import { Settings, CookingPot, Utensils, Menu, BookOpen } from 'lucide-svelte';
|
||||
import { Settings, CookingPot, Utensils, Menu, BookOpen, ArrowLeft } from 'lucide-svelte';
|
||||
import { profileStore } from '$lib/client/profile.svelte';
|
||||
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
||||
import { pwaStore } from '$lib/client/pwa.svelte';
|
||||
@@ -216,7 +216,13 @@
|
||||
|
||||
<header class="bar">
|
||||
<div class="bar-inner">
|
||||
<a href="/" class="brand">Kochwas</a>
|
||||
{#if $page.url.pathname === '/'}
|
||||
<a href="/" class="brand">Kochwas</a>
|
||||
{:else}
|
||||
<a href="/" class="home-back" aria-label="Zurück zur Startseite">
|
||||
<ArrowLeft size={22} strokeWidth={2} />
|
||||
</a>
|
||||
{/if}
|
||||
{#if showHeaderSearch}
|
||||
<div class="nav-search-wrap" bind:this={navContainer}>
|
||||
<form class="nav-search" onsubmit={submitNav} role="search">
|
||||
@@ -407,6 +413,20 @@
|
||||
color: #2b6a3d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.home-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
color: #2b6a3d;
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.home-back:hover {
|
||||
background: #f4f8f5;
|
||||
}
|
||||
.nav-search-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { ArrowLeft } from 'lucide-svelte';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
@@ -12,10 +11,6 @@
|
||||
</script>
|
||||
|
||||
<nav class="tabs">
|
||||
<a href="/" class="back" aria-label="Zurück zu Kochwas">
|
||||
<ArrowLeft size={18} strokeWidth={2} />
|
||||
<span>Zurück</span>
|
||||
</a>
|
||||
{#each items as item (item.href)}
|
||||
<a
|
||||
href={item.href}
|
||||
@@ -57,25 +52,6 @@
|
||||
color: white;
|
||||
border-color: #2b6a3d;
|
||||
}
|
||||
.back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 0.85rem 0.6rem 0.7rem;
|
||||
background: white;
|
||||
border: 1px solid #e4eae7;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
color: #2b6a3d;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
min-height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back:hover {
|
||||
background: #eaf4ed;
|
||||
}
|
||||
.admin-body {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user