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:
HolgerHatGarKeineNode
10
resources/views/flux/sidebar/backdrop.blade.php
Normal file
10
resources/views/flux/sidebar/backdrop.blade.php
Normal file
@@ -0,0 +1,10 @@
|
||||
@blaze
|
||||
|
||||
@php
|
||||
$classes = Flux::classes()
|
||||
->add('z-20 fixed inset-0 bg-black/10 hidden')
|
||||
->add('data-flux-sidebar-on-mobile:not-data-flux-sidebar-collapsed-mobile:block')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<ui-sidebar-toggle {{ $attributes->class($classes) }} data-flux-sidebar-backdrop></ui-sidebar-toggle>
|
||||
65
resources/views/flux/sidebar/brand.blade.php
Normal file
65
resources/views/flux/sidebar/brand.blade.php
Normal file
@@ -0,0 +1,65 @@
|
||||
@blaze
|
||||
|
||||
@php $logoDark ??= $attributes->pluck('logo:dark'); @endphp
|
||||
|
||||
@props([
|
||||
'name' => null,
|
||||
'logo' => null,
|
||||
'logoDark' => null,
|
||||
'alt' => null,
|
||||
'href' => '/',
|
||||
])
|
||||
|
||||
@php
|
||||
$classes = Flux::classes()
|
||||
->add('h-10 flex items-center px-2 in-data-flux-sidebar-collapsed-desktop:w-10 in-data-flux-sidebar-collapsed-desktop:px-2')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:absolute')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:opacity-0')
|
||||
;
|
||||
|
||||
$textClasses = Flux::classes()
|
||||
->add('text-sm font-medium truncate [:where(&)]:text-zinc-800 dark:[:where(&)]:text-zinc-100')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<?php if ($name): ?>
|
||||
<a href="{{ $href }}" {{ $attributes->class([ $classes, 'gap-2' ]) }} data-flux-sidebar-brand>
|
||||
<?php if ($logo instanceof \Illuminate\View\ComponentSlot): ?>
|
||||
<div {{ $logo->attributes->class('flex items-center justify-center [:where(&)]:h-6 [:where(&)]:min-w-6 [:where(&)]:rounded-sm overflow-hidden shrink-0') }}>
|
||||
{{ $logo }}
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="flex items-center justify-center h-6 min-w-6 rounded-sm overflow-hidden shrink-0">
|
||||
<?php if ($logoDark): ?>
|
||||
<img src="{{ $logo }}" alt="{{ $alt }}" class="h-6 min-w-6 dark:hidden" />
|
||||
<img src="{{ $logoDark }}" alt="{{ $alt }}" class="h-6 min-w-6 hidden dark:block" />
|
||||
<?php elseif ($logo): ?>
|
||||
<img src="{{ $logo }}" alt="{{ $alt }}" class="h-6 min-w-6" />
|
||||
<?php else: ?>
|
||||
{{ $slot }}
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="{{ $textClasses }} in-data-flux-sidebar-collapsed-desktop:hidden">{{ $name }}</div>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
<a href="{{ $href }}" {{ $attributes->class($classes) }} data-flux-sidebar-brand>
|
||||
<?php if ($logo instanceof \Illuminate\View\ComponentSlot): ?>
|
||||
<div {{ $logo->attributes->class('flex items-center justify-center [:where(&)]:h-6 [:where(&)]:min-w-6 [:where(&)]:rounded-sm overflow-hidden shrink-0') }}>
|
||||
{{ $logo }}
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="flex items-center justify-center h-6 rounded-sm overflow-hidden shrink-0">
|
||||
<?php if ($logoDark): ?>
|
||||
<img src="{{ $logo }}" alt="{{ $alt }}" class="h-6 dark:hidden" />
|
||||
<img src="{{ $logoDark }}" alt="{{ $alt }}" class="h-6 hidden dark:block" />
|
||||
<?php elseif ($logo): ?>
|
||||
<img src="{{ $logo }}" alt="{{ $alt }}" class="h-6" />
|
||||
<?php else: ?>
|
||||
{{ $slot }}
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
39
resources/views/flux/sidebar/collapse.blade.php
Normal file
39
resources/views/flux/sidebar/collapse.blade.php
Normal file
@@ -0,0 +1,39 @@
|
||||
@blaze
|
||||
|
||||
@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
|
||||
@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
|
||||
@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
|
||||
|
||||
@props([
|
||||
'tooltipPosition' => 'right',
|
||||
'tooltipKbd' => null,
|
||||
'tooltip' => __('Toggle sidebar'),
|
||||
'inset' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$classes = Flux::classes()
|
||||
->add('w-10 h-8 flex items-center justify-center')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:opacity-0')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:absolute')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:opacity-100')
|
||||
->add($inset ? Flux::applyInset($inset, top: '-mt-2.5', right: '-me-2.5', bottom: '-mb-2.5', left: '-ms-2.5') : '')
|
||||
;
|
||||
|
||||
$buttonClasses = Flux::classes()
|
||||
->add('size-10 relative items-center font-medium justify-center gap-2 whitespace-nowrap disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none text-sm rounded-lg inline-flex bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:cursor-e-resize rtl:in-data-flux-sidebar-collapsed-desktop:cursor-w-resize')
|
||||
->add('[&[collapsible="mobile"]]:in-data-flux-sidebar-on-desktop:hidden')
|
||||
->add('rtl:rotate-180')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<ui-sidebar-toggle {{ $attributes->class($classes) }} data-flux-sidebar-collapse>
|
||||
<flux:tooltip :content="$tooltip" :position="$tooltipPosition" :kbd="$tooltipKbd">
|
||||
<button type="button" class="{{ $buttonClasses }}">
|
||||
<svg class="text-zinc-500 dark:text-zinc-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 3.75V16.25M3.4375 16.25H16.5625C17.08 16.25 17.5 15.83 17.5 15.3125V4.6875C17.5 4.17 17.08 3.75 16.5625 3.75H3.4375C2.92 3.75 2.5 4.17 2.5 4.6875V15.3125C2.5 15.83 2.92 16.25 3.4375 16.25Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</flux:tooltip>
|
||||
</ui-sidebar-toggle>
|
||||
101
resources/views/flux/sidebar/group.blade.php
Normal file
101
resources/views/flux/sidebar/group.blade.php
Normal file
@@ -0,0 +1,101 @@
|
||||
@blaze
|
||||
|
||||
@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
|
||||
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
|
||||
|
||||
@props([
|
||||
'iconVariant' => 'outline',
|
||||
'iconTrailing' => null,
|
||||
'expandable' => false,
|
||||
'expanded' => true,
|
||||
'heading' => null,
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
<?php if ($expandable && $heading): ?>
|
||||
<?php if ($icon): ?>
|
||||
<ui-disclosure {{ $attributes->class('group/disclosure in-data-flux-sidebar-collapsed-desktop:hidden') }} @if ($expanded === true) open @endif data-flux-sidebar-group>
|
||||
<button type="button" class="border-1 border-transparent w-full h-8 in-data-flux-sidebar-on-mobile:h-10 flex items-center group/disclosure-button mb-[2px] rounded-lg hover:bg-zinc-800/5 dark:hover:bg-white/[7%] text-zinc-500 hover:text-zinc-800 dark:text-white/80 dark:hover:text-white">
|
||||
<div class="px-3">
|
||||
<?php if (is_string($icon) && $icon !== ''): ?>
|
||||
<flux:icon :icon="$icon" :variant="$iconVariant" class="size-4" />
|
||||
<?php else: ?>
|
||||
{{ $icon }}
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<span class="flex-1 text-left rtl:text-right text-sm font-medium leading-none">{{ $heading }}</span>
|
||||
|
||||
<div class="ps-3 pe-2.5">
|
||||
<flux:icon.chevron-down class="size-3! hidden group-data-open/disclosure-button:block" />
|
||||
<flux:icon.chevron-right class="size-3! block group-data-open/disclosure-button:hidden rtl:rotate-180" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="relative hidden data-open:block space-y-[2px] ps-7" @if ($expanded === true) data-open @endif>
|
||||
<div class="absolute inset-y-[3px] w-px bg-zinc-200 dark:bg-white/30 start-0 ms-5"></div>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</ui-disclosure>
|
||||
|
||||
<flux:dropdown hover class="in-data-flux-sidebar-on-mobile:hidden not-in-data-flux-sidebar-collapsed-desktop:hidden" position="right" align="start" data-flux-sidebar-group-dropdown>
|
||||
<button type="button" class="border-1 border-transparent w-full px-3 in-data-flux-menu:px-2 h-8 flex gap-3 items-center group/disclosure-button mb-[2px] rounded-lg in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-menu:w-10 in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-menu:justify-center hover:bg-zinc-800/5 dark:hover:bg-white/[7%] in-data-flux-menu:hover:bg-zinc-50 dark:in-data-flux-menu:hover:bg-zinc-600 text-zinc-500 in-data-flux-menu:text-zinc-800 hover:text-zinc-800 dark:text-white/80 in-data-flux-menu:dark:text-white dark:hover:text-white">
|
||||
<?php if ($icon): ?>
|
||||
<div class="relative">
|
||||
<?php if (is_string($icon) && $icon !== ''): ?>
|
||||
<flux:icon :icon="$icon" :variant="$iconVariant" class="in-data-flux-menu:text-zinc-400 in-data-flux-menu:dark:text-white/80 in-data-flux-menu:[[data-flux-sidebar-group-dropdown]>button:hover_&]:text-current size-4" />
|
||||
<?php else: ?>
|
||||
{{ $icon }}
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="hidden in-data-flux-menu:block flex-1 text-start text-sm font-medium leading-none text-zinc-800 dark:text-white">{{ $heading }}</span>
|
||||
|
||||
<div class="hidden in-data-flux-menu:block">
|
||||
<flux:icon.chevron-right :variant="$iconVariant" class="ms-auto size-4 text-zinc-400 [[data-flux-sidebar-group-dropdown]>button:hover_&]:text-current rtl:hidden" />
|
||||
<flux:icon.chevron-left :variant="$iconVariant" class="ms-auto size-4 text-zinc-400 [[data-flux-sidebar-group-dropdown]>button:hover_&]:text-current hidden rtl:inline" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.group :$heading>
|
||||
{{ $slot }}
|
||||
</flux:menu.group>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
<?php else: ?>
|
||||
<ui-disclosure {{ $attributes->class('group/disclosure in-data-flux-sidebar-collapsed-desktop:hidden') }} @if ($expanded === true) open @endif data-flux-sidebar-group>
|
||||
<button type="button" class="border-1 border-transparent w-full h-8 in-data-flux-sidebar-on-mobile:h-10 flex items-center group/disclosure-button mb-[2px] rounded-lg hover:bg-zinc-800/5 dark:hover:bg-white/[7%] text-zinc-500 hover:text-zinc-800 dark:text-white/80 dark:hover:text-white">
|
||||
<div class="ps-3.5 pe-3.5">
|
||||
<flux:icon.chevron-down class="size-3! hidden group-data-open/disclosure-button:block" />
|
||||
<flux:icon.chevron-right class="size-3! block group-data-open/disclosure-button:hidden rtl:rotate-180" />
|
||||
</div>
|
||||
|
||||
<span class="text-sm font-medium leading-none">{{ $heading }}</span>
|
||||
</button>
|
||||
|
||||
<div class="relative hidden data-open:block space-y-[2px] ps-7" @if ($expanded === true) data-open @endif>
|
||||
<div class="absolute inset-y-[3px] w-px bg-zinc-200 dark:bg-white/30 start-0 ms-5"></div>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</ui-disclosure>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php elseif ($heading): ?>
|
||||
<div {{ $attributes->class('block space-y-[2px] in-data-flux-sidebar-collapsed-desktop:hidden') }} data-flux-sidebar-group>
|
||||
<div class="px-3 py-2">
|
||||
<div class="text-sm text-zinc-400 font-medium leading-none">{{ $heading }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div {{ $attributes->class('block space-y-[2px] in-data-flux-sidebar-collapsed-desktop:hidden') }} data-flux-sidebar-group>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
5
resources/views/flux/sidebar/header.blade.php
Normal file
5
resources/views/flux/sidebar/header.blade.php
Normal file
@@ -0,0 +1,5 @@
|
||||
@blaze
|
||||
|
||||
<div {{ $attributes->class('flex items-center justify-between gap-2 min-h-10') }} data-flux-sidebar-header>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
55
resources/views/flux/sidebar/index.blade.php
Normal file
55
resources/views/flux/sidebar/index.blade.php
Normal file
@@ -0,0 +1,55 @@
|
||||
@blaze
|
||||
|
||||
@props([
|
||||
'collapsible' => null,
|
||||
'stashable' => null, // @deprecated
|
||||
'sticky' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$collapsibleOnMobile = $stashable || $collapsible === 'mobile' || $collapsible === true;
|
||||
|
||||
if ($stashable && $collapsible === null) {
|
||||
$collapsible = 'mobile';
|
||||
}
|
||||
|
||||
$classes = Flux::classes('[grid-area:sidebar]')
|
||||
->add('z-1 flex flex-col gap-4 [:where(&)]:w-64 p-4')
|
||||
->add('data-flux-sidebar-collapsed-desktop:w-14 data-flux-sidebar-collapsed-desktop:px-2')
|
||||
->add('data-flux-sidebar-collapsed-desktop:cursor-e-resize rtl:data-flux-sidebar-collapsed-desktop:cursor-w-resize')
|
||||
;
|
||||
|
||||
if ($sticky) {
|
||||
$attributes = $attributes->merge([
|
||||
'class' => 'max-h-dvh overflow-y-auto overscroll-contain',
|
||||
]);
|
||||
}
|
||||
|
||||
if ($collapsibleOnMobile) {
|
||||
$attributes = $attributes->merge([
|
||||
// Prevent mobile sidebar from transitioning out on load...
|
||||
'x-init' => '$el.classList.add(\'transition-transform\')',
|
||||
])->class([
|
||||
// Prevent mobile sidebar from flashing on-load...
|
||||
'max-lg:data-flux-sidebar-cloak:hidden',
|
||||
'data-flux-sidebar-on-mobile:data-flux-sidebar-collapsed-mobile:-translate-x-full data-flux-sidebar-on-mobile:data-flux-sidebar-collapsed-mobile:rtl:translate-x-full',
|
||||
'z-20! data-flux-sidebar-on-mobile:start-0! data-flux-sidebar-on-mobile:fixed! data-flux-sidebar-on-mobile:top-0! data-flux-sidebar-on-mobile:min-h-dvh! data-flux-sidebar-on-mobile:max-h-dvh!'
|
||||
]);
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if ($collapsibleOnMobile)
|
||||
<flux:sidebar.backdrop />
|
||||
@endif
|
||||
|
||||
<ui-sidebar
|
||||
{{ $attributes->class($classes) }}
|
||||
@if ($collapsible) collapsible="{{ $collapsible === 'mobile' ? 'mobile' : 'true' }}" @endif
|
||||
@if ($stashable) stashable @endif
|
||||
@if ($sticky) sticky @endif
|
||||
x-data
|
||||
data-flux-sidebar-cloak
|
||||
data-flux-sidebar
|
||||
>
|
||||
{{ $slot }}
|
||||
</ui-sidebar>
|
||||
92
resources/views/flux/sidebar/item.blade.php
Normal file
92
resources/views/flux/sidebar/item.blade.php
Normal file
@@ -0,0 +1,92 @@
|
||||
@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
|
||||
@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
|
||||
@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
|
||||
@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
|
||||
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
|
||||
|
||||
@props([
|
||||
'tooltipPosition' => 'right',
|
||||
'tooltipKbd' => null,
|
||||
'tooltip' => null,
|
||||
'iconVariant' => 'outline',
|
||||
'iconTrailing' => null,
|
||||
'badgeColor' => null,
|
||||
'iconDot' => null,
|
||||
'accent' => true,
|
||||
'badge' => null,
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$tooltip ??= $slot->isNotEmpty() ? (string) $slot : null;
|
||||
|
||||
// Size-up icons in square/icon-only buttons...
|
||||
$iconClasses = Flux::classes('size-4')
|
||||
->add('in-data-flux-sidebar-group-dropdown:text-zinc-400! dark:in-data-flux-sidebar-group-dropdown:text-white/80!')
|
||||
->add('[[data-flux-sidebar-item]:hover_&]:text-current!');
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('h-8 in-data-flux-sidebar-on-mobile:h-10 relative flex items-center gap-3 rounded-lg')
|
||||
->add('in-data-flux-sidebar-collapsed-desktop:w-10 in-data-flux-sidebar-collapsed-desktop:justify-center')
|
||||
->add('py-0 text-start w-full px-3 has-data-flux-navlist-badge:not-in-data-flux-sidebar-collapsed-desktop:pe-1.5 my-px')
|
||||
->add('text-zinc-500 dark:text-white/80')
|
||||
->add(match ($accent) {
|
||||
true => [
|
||||
'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
|
||||
'data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent',
|
||||
'hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 ',
|
||||
'border border-transparent',
|
||||
],
|
||||
false => [
|
||||
'data-current:text-zinc-800 dark:data-current:text-zinc-100 data-current:border-zinc-200',
|
||||
'data-current:bg-white dark:data-current:bg-white/10 data-current:border data-current:border-zinc-200 dark:data-current:border-white/10 data-current:shadow-xs',
|
||||
'hover:text-zinc-800 dark:hover:text-white',
|
||||
],
|
||||
})
|
||||
// Override the default styles to match dropdowns for when the item is inside a collapsed group dropdown...
|
||||
->add('in-data-flux-sidebar-group-dropdown:w-auto! in-data-flux-sidebar-group-dropdown:px-2!')
|
||||
->add('in-data-flux-sidebar-group-dropdown:text-zinc-800! in-data-flux-sidebar-group-dropdown:bg-white! in-data-flux-sidebar-group-dropdown:hover:bg-zinc-50!')
|
||||
->add('dark:in-data-flux-sidebar-group-dropdown:text-white! dark:in-data-flux-sidebar-group-dropdown:bg-transparent! dark:in-data-flux-sidebar-group-dropdown:hover:bg-zinc-600!')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<flux:tooltip :position="$tooltipPosition">
|
||||
<flux:button-or-link :attributes="$attributes->class($classes)" data-flux-sidebar-item>
|
||||
<?php if ($icon): ?>
|
||||
<div class="relative">
|
||||
<?php if (is_string($icon) && $icon !== ''): ?>
|
||||
<flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
|
||||
<?php else: ?>
|
||||
{{ $icon }}
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($iconDot): ?>
|
||||
<div class="absolute top-[-2px] end-[-2px]">
|
||||
<div class="size-[6px] rounded-full bg-zinc-500 dark:bg-zinc-400"></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($slot->isNotEmpty()): ?>
|
||||
<div class="
|
||||
in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden
|
||||
flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&]:hidden [[data-nav-sidebar]_[data-nav-footer]_&]:block" data-content>{{ $slot }}</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
|
||||
<flux:icon :icon="$iconTrailing" :variant="$iconVariant" class="in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden size-4!" />
|
||||
<?php elseif ($iconTrailing): ?>
|
||||
{{ $iconTrailing }}
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($badge) && $badge !== ''): ?>
|
||||
<?php $badgeAttributes = Flux::attributesAfter('badge:', $attributes, ['color' => $badgeColor]); ?>
|
||||
<flux:navlist.badge :attributes="$badgeAttributes" class="in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden">{{ $badge }}</flux:navlist.badge>
|
||||
<?php endif; ?>
|
||||
</flux:button-or-link>
|
||||
|
||||
<flux:tooltip.content :kbd="$tooltipKbd" class="not-in-data-flux-sidebar-collapsed-desktop:hidden in-data-flux-sidebar-group-dropdown:hidden cursor-default">
|
||||
{{ $tooltip }}
|
||||
</flux:tooltip.content>
|
||||
</flux:tooltip>
|
||||
5
resources/views/flux/sidebar/nav.blade.php
Normal file
5
resources/views/flux/sidebar/nav.blade.php
Normal file
@@ -0,0 +1,5 @@
|
||||
@blaze
|
||||
|
||||
<nav {{ $attributes->class('flex flex-col overflow-visible min-h-auto') }} data-flux-sidebar-nav>
|
||||
{{ $slot }}
|
||||
</nav>
|
||||
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>
|
||||
56
resources/views/flux/sidebar/search.blade.php
Normal file
56
resources/views/flux/sidebar/search.blade.php
Normal file
@@ -0,0 +1,56 @@
|
||||
@blaze
|
||||
|
||||
@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
|
||||
@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
|
||||
@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
|
||||
|
||||
@props([
|
||||
'tooltipPosition' => 'right',
|
||||
'placeholder' => __('Search...'),
|
||||
'tooltipKbd' => null,
|
||||
'tooltip' => null,
|
||||
'kbd' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$tooltip = $tooltip ?? $placeholder;
|
||||
|
||||
$tooltipKbd ??= $kbd;
|
||||
|
||||
$tooltipClasses = Flux::classes()
|
||||
->add('w-full')
|
||||
->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
|
||||
;
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('h-10 py-2 px-3 w-full rounded-lg disabled:shadow-none dark:shadow-none appearance-none text-base sm:text-sm leading-[1.375rem] bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%] text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40 border-0 relative flex items-center gap-3')
|
||||
->add('in-data-flux-sidebar-on-mobile:h-10 in-data-flux-sidebar-collapsed-desktop:px-3')
|
||||
->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
|
||||
;
|
||||
@endphp
|
||||
|
||||
<flux:tooltip :position="$tooltipPosition" :class="$tooltipClasses">
|
||||
<button
|
||||
{{ $attributes->class($classes) }}
|
||||
type="button"
|
||||
data-flux-sidebar-search
|
||||
>
|
||||
<div class="flex items-center justify-center text-xs text-zinc-400/75 start-0">
|
||||
<flux:icon class="size-4" icon="magnifying-glass" variant="outline" />
|
||||
</div>
|
||||
|
||||
<div class="in-data-flux-sidebar-collapsed-desktop:hidden block self-center text-start flex-1 font-medium text-zinc-400 dark:text-white/40">
|
||||
{{ $placeholder }}
|
||||
</div>
|
||||
|
||||
<?php if ($kbd): ?>
|
||||
<div class="in-data-flux-sidebar-collapsed-desktop:hidden absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-4 end-0">
|
||||
{{ $kbd }}
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
|
||||
<flux:tooltip.content :kbd="$tooltipKbd" class="not-in-data-flux-sidebar-collapsed-desktop:hidden cursor-default">
|
||||
{{ $tooltip }}
|
||||
</flux:tooltip.content>
|
||||
</flux:tooltip>
|
||||
3
resources/views/flux/sidebar/spacer.blade.php
Normal file
3
resources/views/flux/sidebar/spacer.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
@blaze
|
||||
|
||||
<div {{ $attributes->class('flex-1 pointer-events-none') }} data-flux-sidebar-spacer></div>
|
||||
11
resources/views/flux/sidebar/toggle.blade.php
Normal file
11
resources/views/flux/sidebar/toggle.blade.php
Normal file
@@ -0,0 +1,11 @@
|
||||
@blaze
|
||||
|
||||
<flux:button
|
||||
:attributes="$attributes->class('shrink-0')"
|
||||
variant="subtle"
|
||||
square
|
||||
x-data
|
||||
x-on:click="$dispatch('flux-sidebar-toggle')"
|
||||
aria-label="{{ __('Toggle sidebar') }}"
|
||||
data-flux-sidebar-toggle
|
||||
/>
|
||||
Reference in New Issue
Block a user