style(header): replace Login text with lucide icon
Logged-out users now see a LogIn icon in the header nav pill instead of the "Login" text link. Avatar button still shown when logged in.
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homepage",
|
||||
"version": "1.46.26",
|
||||
"version": "1.46.27",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { page } from '$app/stores';
|
||||
import LogIn from '@lucide/svelte/icons/log-in';
|
||||
|
||||
let { user, recipeLang = 'rezepte', lang = 'de' } = $props();
|
||||
|
||||
@@ -56,6 +57,12 @@
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-link {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.4rem !important;
|
||||
}
|
||||
.options-wrap {
|
||||
--menu-bg: rgba(46, 52, 64, 0.95);
|
||||
--menu-border: rgba(255,255,255,0.08);
|
||||
@@ -155,5 +162,12 @@
|
||||
</div>
|
||||
</button>
|
||||
{:else}
|
||||
<a class=entry href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}">Login</a>
|
||||
<a
|
||||
class="entry login-link"
|
||||
href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}"
|
||||
aria-label={lang === 'de' ? 'Anmelden' : 'Login'}
|
||||
title={lang === 'de' ? 'Anmelden' : 'Login'}
|
||||
>
|
||||
<LogIn size={18} />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user