install
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
@php
|
||||
$isSidebarCollapsibleOnDesktop = filament()->isSidebarCollapsibleOnDesktop();
|
||||
@endphp
|
||||
|
||||
<button class="fi-sidebar-database-notifications-btn">
|
||||
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::OutlinedBell, alias: \Filament\View\PanelsIconAlias::SIDEBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON, size: \Filament\Support\Enums\IconSize::Large) }}
|
||||
|
||||
<span
|
||||
@if ($isSidebarCollapsibleOnDesktop)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-database-notifications-btn-label"
|
||||
>
|
||||
{{ __('filament-panels::layout.actions.open_database_notifications.label') }}
|
||||
</span>
|
||||
|
||||
@if ($unreadNotificationsCount)
|
||||
<span
|
||||
@if ($isSidebarCollapsibleOnDesktop)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-database-notifications-btn-badge-ctn"
|
||||
>
|
||||
<x-filament::badge>
|
||||
{{ $unreadNotificationsCount }}
|
||||
</x-filament::badge>
|
||||
</span>
|
||||
@endif
|
||||
</button>
|
||||
225
resources/views/vendor/filament-panels/components/sidebar/group.blade.php
vendored
Normal file
225
resources/views/vendor/filament-panels/components/sidebar/group.blade.php
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
@props([
|
||||
'active' => false,
|
||||
'collapsible' => true,
|
||||
'icon' => null,
|
||||
'items' => [],
|
||||
'label' => null,
|
||||
'sidebarCollapsible' => true,
|
||||
'subNavigation' => false,
|
||||
])
|
||||
|
||||
@php
|
||||
$sidebarCollapsible = $sidebarCollapsible && filament()->isSidebarCollapsibleOnDesktop();
|
||||
$hasDropdown = filled($label) && filled($icon) && $sidebarCollapsible;
|
||||
@endphp
|
||||
|
||||
<li
|
||||
x-data="{ label: @js($subNavigation ? "sub_navigation_{$label}" : $label) }"
|
||||
data-group-label="{{ $subNavigation ? "sub_navigation_{$label}" : $label }}"
|
||||
x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }"
|
||||
{{
|
||||
$attributes->class([
|
||||
'fi-sidebar-group',
|
||||
'fi-active' => $active,
|
||||
'fi-collapsible' => $collapsible,
|
||||
])
|
||||
}}
|
||||
>
|
||||
@if ($label)
|
||||
<div
|
||||
@if ($collapsible)
|
||||
x-on:click="$store.sidebar.toggleCollapsedGroup(label)"
|
||||
role="button"
|
||||
@endif
|
||||
@if ($sidebarCollapsible)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-group-btn"
|
||||
>
|
||||
@if ($icon)
|
||||
{{ \Filament\Support\generate_icon_html($icon, size: \Filament\Support\Enums\IconSize::Large) }}
|
||||
@endif
|
||||
|
||||
<span class="fi-sidebar-group-label">
|
||||
{{ $label }}
|
||||
</span>
|
||||
|
||||
@if ($collapsible)
|
||||
<x-filament::icon-button
|
||||
color="gray"
|
||||
:icon="\Filament\Support\Icons\Heroicon::ChevronUp"
|
||||
:icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON"
|
||||
:label="$label"
|
||||
x-bind:aria-expanded="! $store.sidebar.groupIsCollapsed(label)"
|
||||
x-on:click.stop="$store.sidebar.toggleCollapsedGroup(label)"
|
||||
class="fi-sidebar-group-collapse-btn"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($hasDropdown)
|
||||
<x-filament::dropdown
|
||||
:placement="(__('filament-panels::layout.direction') === 'rtl') ? 'left-start' : 'right-start'"
|
||||
teleport
|
||||
x-show="! $store.sidebar.isOpen"
|
||||
>
|
||||
<x-slot name="trigger">
|
||||
<button
|
||||
x-data="{ tooltip: false }"
|
||||
x-effect="
|
||||
tooltip = $store.sidebar.isOpen
|
||||
? false
|
||||
: {
|
||||
content: @js($label),
|
||||
placement: document.dir === 'rtl' ? 'left' : 'right',
|
||||
theme: $store.theme,
|
||||
}
|
||||
"
|
||||
x-tooltip.html="tooltip"
|
||||
class="fi-sidebar-group-dropdown-trigger-btn"
|
||||
>
|
||||
{{ \Filament\Support\generate_icon_html($icon, size: \Filament\Support\Enums\IconSize::Large) }}
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
@php
|
||||
$lists = [];
|
||||
|
||||
foreach ($items as $item) {
|
||||
if ($childItems = $item->getChildItems()) {
|
||||
$lists[] = [
|
||||
$item,
|
||||
...$childItems,
|
||||
];
|
||||
$lists[] = [];
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if (empty($lists)) {
|
||||
$lists[] = [$item];
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
$lists[count($lists) - 1][] = $item;
|
||||
}
|
||||
|
||||
if (empty($lists[count($lists) - 1])) {
|
||||
array_pop($lists);
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if (filled($label))
|
||||
<x-filament::dropdown.header>
|
||||
{{ $label }}
|
||||
</x-filament::dropdown.header>
|
||||
@endif
|
||||
|
||||
@foreach ($lists as $list)
|
||||
<x-filament::dropdown.list>
|
||||
@foreach ($list as $item)
|
||||
@php
|
||||
$itemIsActive = $item->isActive();
|
||||
$itemBadge = $item->getBadge();
|
||||
$itemBadgeColor = $item->getBadgeColor();
|
||||
$itemBadgeTooltip = $item->getBadgeTooltip();
|
||||
$itemUrl = $item->getUrl();
|
||||
$itemIcon = $itemIsActive ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon();
|
||||
$shouldItemOpenUrlInNewTab = $item->shouldOpenUrlInNewTab();
|
||||
@endphp
|
||||
|
||||
<x-filament::dropdown.list.item
|
||||
:badge="$itemBadge"
|
||||
:badge-color="$itemBadgeColor"
|
||||
:badge-tooltip="$itemBadgeTooltip"
|
||||
:color="$itemIsActive ? 'primary' : 'gray'"
|
||||
:href="$itemUrl"
|
||||
:icon="$itemIcon"
|
||||
tag="a"
|
||||
:target="$shouldItemOpenUrlInNewTab ? '_blank' : null"
|
||||
>
|
||||
{{ $item->getLabel() }}
|
||||
</x-filament::dropdown.list.item>
|
||||
@endforeach
|
||||
</x-filament::dropdown.list>
|
||||
@endforeach
|
||||
</x-filament::dropdown>
|
||||
@endif
|
||||
|
||||
<ul
|
||||
@if (filled($label))
|
||||
@if ($sidebarCollapsible)
|
||||
x-show="$store.sidebar.isOpen ? ! $store.sidebar.groupIsCollapsed(label) : ! @js($hasDropdown)"
|
||||
@else
|
||||
x-show="! $store.sidebar.groupIsCollapsed(label)"
|
||||
@endif
|
||||
x-collapse.duration.200ms
|
||||
@endif
|
||||
@if ($sidebarCollapsible)
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-group-items"
|
||||
>
|
||||
@foreach ($items as $item)
|
||||
@php
|
||||
$isItemChildItemsActive = $item->isChildItemsActive();
|
||||
$isItemActive = (! $isItemChildItemsActive) && $item->isActive();
|
||||
$itemActiveIcon = $item->getActiveIcon();
|
||||
$itemBadge = $item->getBadge();
|
||||
$itemBadgeColor = $item->getBadgeColor();
|
||||
$itemBadgeTooltip = $item->getBadgeTooltip();
|
||||
$itemChildItems = $item->getChildItems();
|
||||
$itemIcon = $item->getIcon();
|
||||
$shouldItemOpenUrlInNewTab = $item->shouldOpenUrlInNewTab();
|
||||
$itemUrl = $item->getUrl();
|
||||
|
||||
if ($icon) {
|
||||
if ($hasDropdown || (blank($itemIcon) && blank($itemActiveIcon))) {
|
||||
$itemIcon = null;
|
||||
$itemActiveIcon = null;
|
||||
} else {
|
||||
throw new \Exception('Navigation group [' . $label . '] has an icon but one or more of its items also have icons. Either the group or its items can have icons, but not both. This is to ensure a proper user experience.');
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::sidebar.item
|
||||
:active="$isItemActive"
|
||||
:active-child-items="$isItemChildItemsActive"
|
||||
:active-icon="$itemActiveIcon"
|
||||
:badge="$itemBadge"
|
||||
:badge-color="$itemBadgeColor"
|
||||
:badge-tooltip="$itemBadgeTooltip"
|
||||
:child-items="$itemChildItems"
|
||||
:first="$loop->first"
|
||||
:grouped="filled($label)"
|
||||
:icon="$itemIcon"
|
||||
:last="$loop->last"
|
||||
:should-open-url-in-new-tab="$shouldItemOpenUrlInNewTab"
|
||||
:sidebar-collapsible="$sidebarCollapsible"
|
||||
:url="$itemUrl"
|
||||
>
|
||||
{{ $item->getLabel() }}
|
||||
|
||||
@if ($itemIcon instanceof \Illuminate\Contracts\Support\Htmlable)
|
||||
<x-slot name="icon">
|
||||
{{ $itemIcon }}
|
||||
</x-slot>
|
||||
@endif
|
||||
|
||||
@if ($itemActiveIcon instanceof \Illuminate\Contracts\Support\Htmlable)
|
||||
<x-slot name="activeIcon">
|
||||
{{ $itemActiveIcon }}
|
||||
</x-slot>
|
||||
@endif
|
||||
</x-filament-panels::sidebar.item>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
149
resources/views/vendor/filament-panels/components/sidebar/item.blade.php
vendored
Normal file
149
resources/views/vendor/filament-panels/components/sidebar/item.blade.php
vendored
Normal file
@@ -0,0 +1,149 @@
|
||||
@props([
|
||||
'active' => false,
|
||||
'activeChildItems' => false,
|
||||
'activeIcon' => null,
|
||||
'badge' => null,
|
||||
'badgeColor' => null,
|
||||
'badgeTooltip' => null,
|
||||
'childItems' => [],
|
||||
'first' => false,
|
||||
'grouped' => false,
|
||||
'icon' => null,
|
||||
'last' => false,
|
||||
'shouldOpenUrlInNewTab' => false,
|
||||
'sidebarCollapsible' => true,
|
||||
'subGrouped' => false,
|
||||
'url',
|
||||
])
|
||||
|
||||
@php
|
||||
$sidebarCollapsible = $sidebarCollapsible && filament()->isSidebarCollapsibleOnDesktop();
|
||||
@endphp
|
||||
|
||||
<li
|
||||
{{
|
||||
$attributes->class([
|
||||
'fi-sidebar-item',
|
||||
'fi-active' => $active,
|
||||
'fi-sidebar-item-has-active-child-items' => $activeChildItems,
|
||||
'fi-sidebar-item-has-url' => filled($url),
|
||||
])
|
||||
}}
|
||||
>
|
||||
<a
|
||||
{{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
|
||||
x-on:click="window.matchMedia(`(max-width: 1024px)`).matches && $store.sidebar.close()"
|
||||
@if ($sidebarCollapsible)
|
||||
x-data="{ tooltip: false }"
|
||||
x-effect="
|
||||
tooltip = $store.sidebar.isOpen
|
||||
? false
|
||||
: {
|
||||
content: @js($slot->toHtml()),
|
||||
placement: document.dir === 'rtl' ? 'left' : 'right',
|
||||
theme: $store.theme,
|
||||
}
|
||||
"
|
||||
x-tooltip.html="tooltip"
|
||||
@endif
|
||||
class="fi-sidebar-item-btn"
|
||||
>
|
||||
@if (filled($icon) && ((! $subGrouped) || $sidebarCollapsible))
|
||||
{{
|
||||
\Filament\Support\generate_icon_html(($active && $activeIcon) ? $activeIcon : $icon, attributes: (new \Illuminate\View\ComponentAttributeBag([
|
||||
'x-show' => ($subGrouped && $sidebarCollapsible) ? '! $store.sidebar.isOpen' : false,
|
||||
]))->class(['fi-sidebar-item-icon']), size: \Filament\Support\Enums\IconSize::Large)
|
||||
}}
|
||||
@endif
|
||||
|
||||
@if ((blank($icon) && $grouped) || $subGrouped)
|
||||
<div
|
||||
@if (filled($icon) && $subGrouped && $sidebarCollapsible)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
@endif
|
||||
class="fi-sidebar-item-grouped-border"
|
||||
>
|
||||
@if (! $first)
|
||||
<div
|
||||
class="fi-sidebar-item-grouped-border-part-not-first"
|
||||
></div>
|
||||
@endif
|
||||
|
||||
@if (! $last)
|
||||
<div
|
||||
class="fi-sidebar-item-grouped-border-part-not-last"
|
||||
></div>
|
||||
@endif
|
||||
|
||||
<div class="fi-sidebar-item-grouped-border-part"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<span
|
||||
@if ($sidebarCollapsible)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-item-label"
|
||||
>
|
||||
{{ $slot }}
|
||||
</span>
|
||||
|
||||
@if (filled($badge))
|
||||
<span
|
||||
@if ($sidebarCollapsible)
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="fi-transition-enter"
|
||||
x-transition:enter-start="fi-transition-enter-start"
|
||||
x-transition:enter-end="fi-transition-enter-end"
|
||||
@endif
|
||||
class="fi-sidebar-item-badge-ctn"
|
||||
>
|
||||
<x-filament::badge
|
||||
:color="$badgeColor"
|
||||
:tooltip="$badgeTooltip"
|
||||
>
|
||||
{{ $badge }}
|
||||
</x-filament::badge>
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
@if (($active || $activeChildItems) && $childItems)
|
||||
<ul class="fi-sidebar-sub-group-items">
|
||||
@foreach ($childItems as $childItem)
|
||||
@php
|
||||
$isChildItemChildItemsActive = $childItem->isChildItemsActive();
|
||||
$isChildActive = (! $isChildItemChildItemsActive) && $childItem->isActive();
|
||||
$childItemActiveIcon = $childItem->getActiveIcon();
|
||||
$childItemBadge = $childItem->getBadge();
|
||||
$childItemBadgeColor = $childItem->getBadgeColor();
|
||||
$childItemBadgeTooltip = $childItem->getBadgeTooltip();
|
||||
$childItemIcon = $childItem->getIcon();
|
||||
$shouldChildItemOpenUrlInNewTab = $childItem->shouldOpenUrlInNewTab();
|
||||
$childItemUrl = $childItem->getUrl();
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::sidebar.item
|
||||
:active="$isChildActive"
|
||||
:active-child-items="$isChildItemChildItemsActive"
|
||||
:active-icon="$childItemActiveIcon"
|
||||
:badge="$childItemBadge"
|
||||
:badge-color="$childItemBadgeColor"
|
||||
:badge-tooltip="$childItemBadgeTooltip"
|
||||
:first="$loop->first"
|
||||
grouped
|
||||
:icon="$childItemIcon"
|
||||
:last="$loop->last"
|
||||
:should-open-url-in-new-tab="$shouldChildItemOpenUrlInNewTab"
|
||||
sub-grouped
|
||||
:url="$childItemUrl"
|
||||
>
|
||||
{{ $childItem->getLabel() }}
|
||||
</x-filament-panels::sidebar.item>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</li>
|
||||
Reference in New Issue
Block a user