Merge pull request #13973 from bumbummen99/patch-5

docs/03-resources/02-listing-records.md

@@ -7,7 +7,7 @@ title: Listing records
 You can add tabs above the table, which can be used to filter the records based on some predefined conditions. Each tab can scope the Eloquent query of the table in a different way. To register tabs, add a `getTabs()` method to the List page class, and return an array of `Tab` objects:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 use Illuminate\Database\Eloquent\Builder;
 
 public function getTabs(): array
@@ -27,7 +27,7 @@ public function getTabs(): array
 The keys of the array will be used as identifiers for the tabs, so they can be persisted in the URL's query string. The label of each tab is also generated from the key, but you can override that by passing a label into the `make()` method of the tab:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 use Illuminate\Database\Eloquent\Builder;
 
 public function getTabs(): array
@@ -47,7 +47,7 @@ public function getTabs(): array
 You can add icons to the tabs by passing an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) into the `icon()` method of the tab:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use use Filament\Resources\Components\Tab;
 
 Tab::make()
     ->icon('heroicon-m-user-group')
@@ -68,7 +68,7 @@ Tab::make()
 You can add badges to the tabs by passing a string into the `badge()` method of the tab:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 
 Tab::make()
     ->badge(Customer::query()->where('active', true)->count())
@@ -79,7 +79,7 @@ Tab::make()
 The color of a badge may be changed using the `badgeColor()` method:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 
 Tab::make()
     ->badge(Customer::query()->where('active', true)->count())
@@ -91,7 +91,7 @@ Tab::make()
 You may also pass extra HTML attributes to filter tabs using `extraAttributes()`:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 
 Tab::make()
     ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])
@@ -102,7 +102,7 @@ Tab::make()
 To customize the default tab that is selected when the page is loaded, you can return the array key of the tab from the `getDefaultActiveTab()` method:
 
 ```php
-use Filament\Resources\Pages\ListRecords\Tab;
+use Filament\Resources\Components\Tab;
 
 public function getTabs(): array
 {

resources/views/components/layout/simple.blade.php

@@ -15,7 +15,9 @@
                 class="absolute end-0 top-0 flex h-16 items-center gap-x-4 pe-4 md:pe-6 lg:pe-8"
             >
                 @if (filament()->hasDatabaseNotifications())
-                    @livewire(Filament\Livewire\DatabaseNotifications::class, ['lazy' => true])
+                    @livewire(Filament\Livewire\DatabaseNotifications::class, [
+                        'lazy' => filament()->hasLazyLoadedDatabaseNotifications()
+                    ])
                 @endif
 
                 <x-filament-panels::user-menu />

resources/views/components/page/index.blade.php

@@ -64,13 +64,17 @@
             ])
         >
             @if ($subNavigation)
-                {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_BEFORE, scopes: $this->getRenderHookScopes()) }}
+                <div class="md:hidden">
+                    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_BEFORE, scopes: $this->getRenderHookScopes()) }}
+                </div>
 
                 <x-filament-panels::page.sub-navigation.select
                     :navigation="$subNavigation"
                 />
 
-                {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_AFTER, scopes: $this->getRenderHookScopes()) }}
+                <div class="md:hidden">
+                    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_AFTER, scopes: $this->getRenderHookScopes()) }}
+                </div>
 
                 @if ($subNavigationPosition === SubNavigationPosition::Start)
                     {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_START_BEFORE, scopes: $this->getRenderHookScopes()) }}

resources/views/components/page/sub-navigation/sidebar.blade.php

@@ -2,20 +2,28 @@
     'navigation',
 ])
 
-<ul
-    wire:ignore
-    {{ $attributes->class(['fi-page-sub-navigation-sidebar hidden w-72 flex-col gap-y-7 md:flex']) }}
+<div
+    {{ $attributes->class(['fi-page-sub-navigation-sidebar-ctn hidden w-72 flex-col md:flex']) }}
 >
-    @foreach ($navigation as $navigationGroup)
-        <x-filament-panels::sidebar.group
-            :active="$navigationGroup->isActive()"
-            :collapsible="$navigationGroup->isCollapsible()"
-            :icon="$navigationGroup->getIcon()"
-            :items="$navigationGroup->getItems()"
-            :label="$navigationGroup->getLabel()"
-            :sidebar-collapsible="false"
-            sub-navigation
-            :attributes="\Filament\Support\prepare_inherited_attributes($navigationGroup->getExtraSidebarAttributeBag())"
-        />
-    @endforeach
-</ul>
+    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_BEFORE, scopes: $this->getRenderHookScopes()) }}
+
+    <ul
+        wire:ignore
+        class="fi-page-sub-navigation-sidebar flex flex-col gap-y-7"
+    >
+        @foreach ($navigation as $navigationGroup)
+            <x-filament-panels::sidebar.group
+                :active="$navigationGroup->isActive()"
+                :collapsible="$navigationGroup->isCollapsible()"
+                :icon="$navigationGroup->getIcon()"
+                :items="$navigationGroup->getItems()"
+                :label="$navigationGroup->getLabel()"
+                :sidebar-collapsible="false"
+                sub-navigation
+                :attributes="\Filament\Support\prepare_inherited_attributes($navigationGroup->getExtraSidebarAttributeBag())"
+            />
+        @endforeach
+    </ul>
+
+    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_AFTER, scopes: $this->getRenderHookScopes()) }}
+</div>

resources/views/components/topbar/index.blade.php

@@ -165,7 +165,9 @@ class="ms-auto flex items-center gap-x-4"
 
             @if (filament()->auth()->check())
                 @if (filament()->hasDatabaseNotifications())
-                    @livewire(Filament\Livewire\DatabaseNotifications::class, ['lazy' => true])
+                    @livewire(Filament\Livewire\DatabaseNotifications::class, [
+                        'lazy' => filament()->hasLazyLoadedDatabaseNotifications(),
+                    ])
                 @endif
 
                 <x-filament-panels::user-menu />

src/Facades/Filament.php

@@ -100,6 +100,7 @@
  * @method static bool hasDarkMode()
  * @method static bool hasDarkModeForced()
  * @method static bool hasDatabaseNotifications()
+ * @method static bool hasLazyLoadedDatabaseNotifications()
  * @method static bool hasEmailVerification()
  * @method static bool hasLogin()
  * @method static bool hasNavigation()

src/FilamentManager.php

@@ -566,6 +566,11 @@ public function hasDatabaseNotifications(): bool
         return $this->getCurrentPanel()->hasDatabaseNotifications();
     }
 
+    public function hasLazyLoadedDatabaseNotifications(): bool
+    {
+        return $this->getCurrentPanel()->hasLazyLoadedDatabaseNotifications();
+    }
+
     public function hasEmailVerification(): bool
     {
         return $this->getCurrentPanel()->hasEmailVerification();

src/Panel/Concerns/HasNotifications.php

@@ -8,11 +8,21 @@ trait HasNotifications
 {
     protected bool | Closure $hasDatabaseNotifications = false;
 
+    protected bool | Closure $hasLazyLoadedDatabaseNotifications = true;
+
     protected string | Closure | null $databaseNotificationsPolling = '30s';
 
-    public function databaseNotifications(bool | Closure $condition = true): static
+    public function databaseNotifications(bool | Closure $condition = true, bool | Closure $isLazy = true): static
     {
         $this->hasDatabaseNotifications = $condition;
+        $this->lazyLoadedDatabaseNotifications($isLazy);
+
+        return $this;
+    }
+
+    public function lazyLoadedDatabaseNotifications(bool | Closure $condition = true): static
+    {
+        $this->hasLazyLoadedDatabaseNotifications = $condition;
 
         return $this;
     }
@@ -29,6 +39,11 @@ public function hasDatabaseNotifications(): bool
         return (bool) $this->evaluate($this->hasDatabaseNotifications);
     }
 
+    public function hasLazyLoadedDatabaseNotifications(): bool
+    {
+        return (bool) $this->evaluate($this->hasLazyLoadedDatabaseNotifications);
+    }
+
     public function getDatabaseNotificationsPollingInterval(): ?string
     {
         return $this->evaluate($this->databaseNotificationsPolling);

src/View/PanelsRenderHook.php

@@ -62,6 +62,10 @@ class PanelsRenderHook
 
     const PAGE_SUB_NAVIGATION_SELECT_BEFORE = 'panels::page.sub-navigation.select.before';
 
+    const PAGE_SUB_NAVIGATION_SIDEBAR_AFTER = 'panels::page.sub-navigation.sidebar.after';
+
+    const PAGE_SUB_NAVIGATION_SIDEBAR_BEFORE = 'panels::page.sub-navigation.sidebar.before';
+
     const PAGE_SUB_NAVIGATION_START_AFTER = 'panels::page.sub-navigation.start.after';
 
     const PAGE_SUB_NAVIGATION_START_BEFORE = 'panels::page.sub-navigation.start.before';