mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.
This commit is contained in:
54
resources/views/flux/sidebar/profile.blade.php
Normal file
54
resources/views/flux/sidebar/profile.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
@blaze
|
||||
|
||||
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
|
||||
@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
|
||||
|
||||
@props([
|
||||
'iconVariant' => 'micro',
|
||||
'iconTrailing' => null,
|
||||
'initials' => null,
|
||||
'chevron' => true,
|
||||
'circle' => null,
|
||||
'avatar' => null,
|
||||
'name' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$iconTrailing = $iconTrailing ?? ($chevron ? 'chevron-down' : null);
|
||||
|
||||
// When using the outline icon variant, we need to size it down to match the default icon sizes...
|
||||
$iconClasses = Flux::classes('text-zinc-400 dark:text-white/80 group-hover:text-zinc-800 dark:group-hover:text-white')
|
||||
->add($iconVariant === 'outline' ? 'size-4' : '');
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('group flex items-center')
|
||||
->add('rounded-lg has-data-[circle=true]:rounded-full')
|
||||
->add('[ui-dropdown>&]:w-full') // Without this, the "name" won't get truncated in a sidebar dropdown...
|
||||
->add('p-1 hover:bg-zinc-800/5 dark:hover:bg-white/10')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<button type="button" {{ $attributes->class($classes) }} data-flux-sidebar-profile>
|
||||
<div class="shrink-0">
|
||||
<?php if ($avatar instanceof \Illuminate\View\ComponentSlot): ?>
|
||||
{{ $avatar }}
|
||||
<?php else: ?>
|
||||
<?php $avatarAttributes = Flux::attributesAfter('avatar:', $attributes, ['src' => $avatar, 'size' => 'sm', 'circle' => $circle, 'name' => $name, 'initials' => $initials]); ?>
|
||||
<flux:avatar :attributes="$avatarAttributes" />
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($name): ?>
|
||||
<span class="in-data-flux-sidebar-collapsed-desktop:hidden mx-2 text-sm text-zinc-500 dark:text-white/80 group-hover:text-zinc-800 dark:group-hover:text-white font-medium truncate">
|
||||
{{ $name }}
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
|
||||
<div class="in-data-flux-sidebar-collapsed-desktop:hidden shrink-0 ms-auto size-8 flex justify-center items-center">
|
||||
<flux:icon :icon="$iconTrailing" :variant="$iconVariant" :class="$iconClasses" />
|
||||
</div>
|
||||
<?php elseif ($iconTrailing): ?>
|
||||
{{ $iconTrailing }}
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
Reference in New Issue
Block a user