Peter Meier
0ab2c58eb4
- Header desktop nav: social icons grouped in a wald-tinted pill with labels, active-state (aria-current + bold), opacity hover (no per-item bg) - Mobile overlay: social links as icon+label rows with active-state - Search button: lucide:search, icon-only - Migrate all icons mdi→lucide app-wide (234 refs); brand/language logos (google, whatsapp, mastodon, telegram, language-*) stay on mdi - generate-icons: emit mdi + lucide subsets; add @iconify-json/lucide - iconify-offline: register lucide collection - scripts/icon-map|validate|apply: reusable migration tooling Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import Icon from "@iconify/svelte";
|
|
import "$lib/iconify-offline";
|
|
|
|
interface Props {
|
|
label: string;
|
|
open?: boolean;
|
|
lazy?: boolean;
|
|
id?: string;
|
|
class?: string;
|
|
onToggleEvent?: (e: Event) => void;
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
label,
|
|
open = false,
|
|
lazy = false,
|
|
id = undefined,
|
|
class: cls = "",
|
|
onToggleEvent,
|
|
children,
|
|
}: Props = $props();
|
|
|
|
let everOpened = $state(false);
|
|
const mounted = $derived(!lazy || open || everOpened);
|
|
|
|
function onToggle(e: Event) {
|
|
if ((e.target as HTMLDetailsElement).open) everOpened = true;
|
|
onToggleEvent?.(e);
|
|
}
|
|
</script>
|
|
|
|
<details {id} {open} ontoggle={onToggle} class="pt-4 border-t border-stein-200 group {cls}">
|
|
<summary class="flex cursor-pointer list-none items-center gap-2 text-sm font-medium select-none">
|
|
<Icon icon="lucide:chevron-right" class="size-4 shrink-0 transition-transform group-open:rotate-90" />
|
|
{label}
|
|
</summary>
|
|
<div class="mt-4">
|
|
{#if mounted}
|
|
{@render children()}
|
|
{/if}
|
|
</div>
|
|
</details>
|