Merge branch '4.x' of https://github.com/filamentphp/filament into 4.x

docs/08-styling/04-icons.md

@@ -211,6 +211,7 @@ Using class `Filament\View\PanelsIconAlias`
 - `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` - Button to expand the sidebar
 - `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` - Button to expand the sidebar (right-to-left direction)
 - `PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON` - Collapse button for a sidebar group
+- `PanelsIconAlias::SIDEBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON` - Button to open the database notifications modal
 - `PanelsIconAlias::TENANT_MENU_BILLING_BUTTON` - Billing button in the tenant menu
 - `PanelsIconAlias::TENANT_MENU_PROFILE_BUTTON` - Profile button in the tenant menu
 - `PanelsIconAlias::TENANT_MENU_REGISTRATION_BUTTON` - Registration button in the tenant menu
@@ -224,6 +225,7 @@ Using class `Filament\View\PanelsIconAlias`
 - `PanelsIconAlias::TOPBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON` - Button to open the database notifications modal
 - `PanelsIconAlias::USER_MENU_PROFILE_ITEM` - Profile item in the user menu
 - `PanelsIconAlias::USER_MENU_LOGOUT_BUTTON` - Button in the user menu to log out
+- `PanelsIconAlias::USER_MENU_TOGGLE_BUTTON` - Button to toggle the user menu 
 - `PanelsIconAlias::WIDGETS_ACCOUNT_LOGOUT_BUTTON` - Button in the account widget to log out
 - `PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_DOCUMENTATION_BUTTON` - Button to open the documentation from the Filament info widget
 - `PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_GITHUB_BUTTON` - Button to open GitHub from the Filament info widget

docs/09-advanced/01-render-hooks.md

@@ -108,6 +108,7 @@ use Filament\View\PanelsRenderHook;
 - `PanelsRenderHook::SIMPLE_PAGE_END` - End of the simple page content container, also [can be scoped](#scoping-render-hooks) to the page class
 - `PanelsRenderHook::SIMPLE_PAGE_START` - Start of the simple page content container, also [can be scoped](#scoping-render-hooks) to the page class
 - `PanelsRenderHook::SIDEBAR_FOOTER` - Pinned to the bottom of the sidebar, below the content
+- `PanelsRenderHook::SIDEBAR_START` - Start of the sidebar container
 - `PanelsRenderHook::STYLES_AFTER` - After styles are defined
 - `PanelsRenderHook::STYLES_BEFORE` - Before styles are defined
 - `PanelsRenderHook::TENANT_MENU_AFTER` - After the [tenant menu](../users/tenancy#customizing-the-tenant-menu)

packages/forms/resources/css/components/rich-editor.css

@@ -163,7 +163,7 @@
 
             & td,
             & th {
-                @apply relative min-w-[1em] border border-gray-300 !px-2 py-2 align-top dark:border-gray-600;
+                @apply relative min-w-[1em] border border-gray-300 !p-2 align-top dark:border-gray-600;
 
                 & > * {
                     @apply mb-0;

packages/notifications/resources/views/database-notifications.blade.php

@@ -26,7 +26,9 @@
         id="database-notifications"
         slide-over
         :sticky-header="$hasNotifications"
+        teleport="body"
         width="md"
+        class="fi-no-database"
         :attributes="
             new \Illuminate\View\ComponentAttributeBag([
                 'wire:poll.' . $pollingInterval => $pollingInterval ? '' : false,

packages/panels/resources/css/components/global-search.css

@@ -3,11 +3,11 @@
 }
 
 .fi-global-search {
-    @apply sm:relative;
+    @apply flex-1 sm:relative;
 }
 
 .fi-global-search-results-ctn {
-    @apply absolute inset-x-4 z-10 mt-2 max-h-96 overflow-auto rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition sm:inset-x-auto sm:end-0 sm:w-screen sm:max-w-sm dark:bg-gray-900 dark:ring-white/10;
+    @apply absolute inset-x-4 z-10 mt-2 max-h-96 overflow-auto rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition sm:inset-x-auto dark:bg-gray-900 dark:ring-white/10;
 
     /**
      * This zero translation along the z-axis fixes a Safari bug
@@ -24,6 +24,20 @@
     }
 }
 
+.fi-topbar .fi-global-search-results-ctn {
+    @apply sm:end-0 sm:w-screen sm:max-w-sm;
+}
+
+.fi-sidebar {
+    & .fi-global-search-ctn {
+        @apply mx-3 mt-3;
+    }
+
+    & .fi-global-search-results-ctn {
+        @apply sm:start-0;
+    }
+}
+
 .fi-global-search-no-results-message {
     @apply px-4 py-4 text-sm text-gray-500 dark:text-gray-400;
 }

packages/panels/resources/css/components/layout.css

@@ -12,6 +12,14 @@ html.fi {
         }
     }
 
+    & > .fi-layout-sidebar-toggle-btn-ctn {
+        @apply ps-5 pt-5;
+
+        &.lg\:fi-hidden {
+            @apply lg:hidden;
+        }
+    }
+
     &.fi-body-has-navigation:not(
             .fi-body-has-sidebar-collapsible-on-desktop
         ):not(.fi-body-has-sidebar-fully-collapsible-on-desktop):not(

packages/panels/resources/css/components/sidebar.css

@@ -17,7 +17,7 @@
 }
 
 .fi-sidebar-group-btn {
-    @apply flex items-center gap-x-3 px-2 py-2;
+    @apply flex items-center gap-x-3 p-2;
 
     & .fi-icon {
         @apply text-gray-400 dark:text-gray-500;
@@ -29,7 +29,7 @@
 }
 
 .fi-sidebar-group-dropdown-trigger-btn {
-    @apply relative flex flex-1 items-center justify-center gap-x-3 rounded-lg px-2 py-2 outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+    @apply relative flex flex-1 items-center justify-center gap-x-3 rounded-lg p-2 outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
 
     & .fi-icon {
         @apply text-gray-400 dark:text-gray-500;
@@ -56,7 +56,7 @@
 }
 
 .fi-sidebar {
-    @apply fixed inset-y-0 start-0 z-30 flex h-dvh flex-col content-start bg-white transition-all lg:top-[4rem] lg:z-20 lg:h-[calc(100dvh-4rem)] lg:bg-transparent lg:transition-none dark:bg-gray-900 dark:lg:bg-transparent;
+    @apply fixed inset-y-0 start-0 z-30 flex h-dvh flex-col content-start bg-white transition-all lg:z-20 lg:bg-transparent lg:transition-none dark:bg-gray-900 dark:lg:bg-transparent;
 
     &.fi-sidebar-open {
         @apply w-(--sidebar-width) translate-x-0 shadow-xl ring-1 ring-gray-950/5 lg:shadow-none lg:ring-0 rtl:-translate-x-0 dark:ring-white/10;
@@ -67,6 +67,10 @@
     }
 }
 
+.fi-body-has-topbar .fi-sidebar {
+    @apply lg:top-[4rem] lg:h-[calc(100dvh-4rem)];
+}
+
 .fi-sidebar-close-overlay {
     @apply fixed inset-0 z-30 bg-gray-950/50 transition duration-500 lg:hidden dark:bg-gray-950/75;
 }
@@ -105,36 +109,30 @@
             }
         }
     }
-
-    &.fi-body-has-sidebar-collapsible-on-desktop {
-        & .fi-sidebar-nav-tenant-menu-ctn {
-            @apply -mx-2;
-        }
-    }
-
-    &:not(.fi-body-has-sidebar-collapsible-on-desktop) {
-        & .fi-sidebar {
-            &.fi-sidebar-open {
-                & .fi-sidebar-nav-tenant-menu-ctn {
-                    @apply -mx-2;
-                }
-            }
-
-            &:not(.fi-sidebar-open) {
-                & .fi-sidebar-nav-tenant-menu-ctn {
-                    @apply -mx-4;
-                }
-            }
-        }
-    }
 }
 
 .fi-sidebar-header-ctn {
-    @apply overflow-x-clip lg:hidden;
+    @apply overflow-x-clip;
 }
 
 .fi-sidebar-header {
-    @apply flex h-16 items-center bg-white px-6 ring-1 ring-gray-950/5 lg:shadow-xs dark:bg-gray-900 dark:ring-white/10;
+    @apply flex h-16 items-center justify-center;
+}
+
+.fi-sidebar-header-logo-ctn {
+    @apply flex-1;
+}
+
+.fi-body-has-topbar .fi-sidebar-header {
+    @apply bg-white px-6 ring-1 ring-gray-950/5 lg:hidden lg:shadow-xs dark:bg-gray-900 dark:ring-white/10;
+}
+
+:not(.fi-body-has-topbar) .fi-sidebar-header {
+    @apply bg-transparent px-4 shadow-none ring-0;
+
+    .fi-logo {
+        @apply ms-3;
+    }
 }
 
 .fi-sidebar-nav {
@@ -184,7 +182,7 @@
 }
 
 .fi-sidebar-item-btn {
-    @apply relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 outline-hidden transition duration-75;
+    @apply relative flex items-center justify-center gap-x-3 rounded-lg p-2 outline-hidden transition duration-75;
 
     & > .fi-icon {
         @apply text-gray-400 dark:text-gray-500;
@@ -229,3 +227,56 @@
 .fi-sidebar-sub-group-items {
     @apply flex flex-col gap-y-1;
 }
+
+.fi-sidebar > .fi-no-database {
+    @apply block;
+}
+
+.fi-sidebar-database-notifications-btn {
+    @apply relative mx-4 flex w-full items-center justify-center gap-x-3 rounded-lg p-2 text-start outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    & > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & > .fi-sidebar-database-notifications-btn-label {
+        @apply flex-1 truncate text-sm font-medium text-gray-700 dark:text-gray-200;
+    }
+
+    & > .fi-sidebar-database-notifications-btn-label,
+    & > .fi-sidebar-database-notifications-btn-badge-ctn {
+        &.fi-transition-enter {
+            @apply lg:transition lg:delay-100;
+        }
+
+        &.fi-transition-enter-start {
+            @apply opacity-0;
+        }
+
+        &.fi-transition-enter-end {
+            @apply opacity-100;
+        }
+    }
+}
+
+.fi-sidebar-open-sidebar-btn,
+.fi-sidebar-open-collapse-sidebar-btn {
+    @apply mx-0!;
+}
+
+.fi-sidebar-close-collapse-sidebar-btn {
+    @apply mx-0! hidden lg:flex;
+}
+
+.fi-body {
+    &.fi-body-has-sidebar-collapsible-on-desktop,
+    &:not(.fi-body-has-sidebar-fully-collapsible-on-desktop) {
+        & .fi-sidebar-open-sidebar-btn {
+            @apply lg:hidden;
+        }
+    }
+}
+
+.fi-sidebar-close-sidebar-btn {
+    @apply mx-0! lg:hidden;
+}

packages/panels/resources/css/components/tenant-menu.css

@@ -33,3 +33,9 @@
 .fi-tenant-menu-trigger-tenant-name {
     @apply text-gray-950 dark:text-white;
 }
+
+.fi-sidebar {
+    & .fi-tenant-menu {
+        @apply mx-4 mt-3;
+    }
+}

packages/panels/resources/css/components/user-menu.css

@@ -2,6 +2,44 @@
     @apply flex items-center gap-x-4;
 }
 
-.fi-user-menu-trigger {
+.fi-topbar .fi-user-menu-trigger {
     @apply shrink-0;
 }
+
+.fi-sidebar .fi-user-menu-trigger {
+    @apply flex w-full items-center justify-center gap-x-3 rounded-lg p-2 text-sm font-medium outline-hidden transition duration-75;
+
+    & .fi-user-avatar {
+        @apply shrink-0;
+    }
+
+    & .fi-icon {
+        @apply ms-auto size-5 shrink-0 text-gray-400 transition duration-75 group-hover:text-gray-500 group-focus-visible:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400 dark:group-focus-visible:text-gray-400;
+    }
+
+    &:hover {
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+    }
+
+    &:focus-visible {
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+    }
+
+    .fi-tenant-menu-trigger-text {
+        @apply grid justify-items-start text-start text-gray-950 dark:text-white;
+    }
+}
+
+.fi-sidebar {
+    & .fi-user-menu {
+        @apply mx-4 my-3;
+
+        & .fi-dropdown-panel {
+            max-width: max(14rem, calc(100% - 1.5rem)) !important;
+        }
+    }
+}

packages/panels/resources/lang/en/layout.php

@@ -15,7 +15,7 @@ return [
         ],
 
         'open_database_notifications' => [
-            'label' => 'Open notifications',
+            'label' => 'Notifications',
         ],
 
         'open_user_menu' => [

packages/panels/resources/views/components/layout/index.blade.php

@@ -32,9 +32,31 @@
         @livewire(filament()->getTopbarLivewireComponent())
 
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $renderHookScopes) }}
+    @else
+        <div
+            @if ($isSidebarFullyCollapsibleOnDesktop)
+                x-data="{}"
+                x-bind:class="{ 'lg:fi-hidden': $store.sidebar.isOpen }"
+            @endif
+            @class([
+                'fi-layout-sidebar-toggle-btn-ctn',
+                'lg:fi-hidden' => ! $isSidebarFullyCollapsibleOnDesktop,
+            ])
+        >
+            <x-filament::icon-button
+                color="gray"
+                :icon="\Filament\Support\Icons\Heroicon::OutlinedBars3"
+                :icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON"
+                icon-size="lg"
+                :label="__('filament-panels::layout.actions.sidebar.expand.label')"
+                x-cloak
+                x-data="{}"
+                x-on:click="$store.sidebar.open()"
+                class="fi-layout-sidebar-toggle-btn"
+            />
+        </div>
     @endif
 
-    {{-- The sidebar is after the page content in the markup to fix issues with page content overlapping dropdown content from the sidebar. --}}
     <div class="fi-layout">
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_START, scopes: $renderHookScopes) }}
 

packages/panels/resources/views/components/sidebar/database-notifications-trigger.blade.php

@@ -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>

packages/panels/resources/views/components/user-menu.blade.php

@@ -1,3 +1,8 @@
+@props([
+    'dropdownPlacement' => 'bottom-end',
+    'trigger' => null,
+])
+
 @php
     use Filament\Actions\Action;
     use Illuminate\Support\Arr;
@@ -24,7 +29,7 @@
 {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::USER_MENU_BEFORE) }}
 
 <x-filament::dropdown
-    placement="bottom-end"
+    :placement="$dropdownPlacement"
     teleport
     :attributes="
         \Filament\Support\prepare_inherited_attributes($attributes)
@@ -32,13 +37,17 @@
     "
 >
     <x-slot name="trigger">
-        <button
-            aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}"
-            type="button"
-            class="fi-user-menu-trigger"
-        >
-            <x-filament-panels::avatar.user :user="$user" loading="lazy" />
-        </button>
+        @if ($trigger)
+            {{ $trigger }}
+        @else
+            <button
+                aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}"
+                type="button"
+                class="fi-user-menu-trigger"
+            >
+                <x-filament-panels::avatar.user :user="$user" loading="lazy" />
+            </button>
+        @endif
     </x-slot>
 
     @if ($hasProfileHeader)

packages/panels/resources/views/livewire/sidebar.blade.php

@@ -4,6 +4,8 @@
         $isRtl = __('filament-panels::layout.direction') === 'rtl';
         $isSidebarCollapsibleOnDesktop = filament()->isSidebarCollapsibleOnDesktop();
         $isSidebarFullyCollapsibleOnDesktop = filament()->isSidebarFullyCollapsibleOnDesktop();
+        $hasNavigation = filament()->hasNavigation();
+        $hasTopbar = filament()->hasTopbar();
     @endphp
 
     {{-- format-ignore-start --}}
@@ -17,35 +19,87 @@
         x-bind:class="{ 'fi-sidebar-open': $store.sidebar.isOpen }"
         class="fi-sidebar fi-main-sidebar"
     >
+        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_START) }}
+
         <div class="fi-sidebar-header-ctn">
             <header
                 class="fi-sidebar-header"
             >
+                @if ((! $hasTopbar) && $isSidebarCollapsibleOnDesktop)
+                    <x-filament::icon-button
+                        color="gray"
+                        :icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronLeft : \Filament\Support\Icons\Heroicon::OutlinedChevronRight"
+                        {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` for RTL. --}}
+                        :icon-alias="
+                            $isRtl
+                            ? [
+                                \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL,
+                                \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON,
+                            ]
+                            : \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON
+                        "
+                        icon-size="lg"
+                        :label="__('filament-panels::layout.actions.sidebar.expand.label')"
+                        x-cloak
+                        x-data="{}"
+                        x-on:click="$store.sidebar.open()"
+                        x-show="! $store.sidebar.isOpen"
+                        class="fi-sidebar-open-collapse-sidebar-btn"
+                    />
+                @endif
+
+                @if ((! $hasTopbar) && ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop))
+                    <x-filament::icon-button
+                        color="gray"
+                        :icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronRight : \Filament\Support\Icons\Heroicon::OutlinedChevronLeft"
+                        {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON` for RTL. --}}
+                        :icon-alias="
+                            $isRtl
+                            ? [
+                                \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL,
+                                \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON,
+                            ]
+                            : \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON
+                        "
+                        icon-size="lg"
+                        :label="__('filament-panels::layout.actions.sidebar.collapse.label')"
+                        x-cloak
+                        x-data="{}"
+                        x-on:click="$store.sidebar.close()"
+                        x-show="$store.sidebar.isOpen"
+                        class="fi-sidebar-close-collapse-sidebar-btn"
+                    />
+                @endif
+
                 {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_LOGO_BEFORE) }}
 
-	            @if ($homeUrl = filament()->getHomeUrl())
-                    <a {{ \Filament\Support\generate_href_html($homeUrl) }}>
+                <div x-show="$store.sidebar.isOpen" class="fi-sidebar-header-logo-ctn">
+                    @if ($homeUrl = filament()->getHomeUrl())
+                        <a {{ \Filament\Support\generate_href_html($homeUrl) }}>
+                            <x-filament-panels::logo />
+                        </a>
+                    @else
                         <x-filament-panels::logo />
-                    </a>
-                @else
-                    <x-filament-panels::logo />
-                @endif
+                    @endif
+                </div>
 
                 {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_LOGO_AFTER) }}
             </header>
         </div>
 
+        @if (filament()->hasTenancy() && filament()->hasTenantMenu())
+            <x-filament-panels::tenant-menu />
+        @endif
+
+        @if ((! $hasTopbar) && filament()->isGlobalSearchEnabled())
+            <div x-show="$store.sidebar.isOpen">
+                @livewire(Filament\Livewire\GlobalSearch::class)
+            </div>
+        @endif
+
         <nav class="fi-sidebar-nav">
             {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_NAV_START) }}
 
-            @if (filament()->hasTenancy() && filament()->hasTenantMenu())
-                <div
-                    class="fi-sidebar-nav-tenant-menu-ctn"
-                >
-                    <x-filament-panels::tenant-menu />
-                </div>
-            @endif
-
             <ul class="fi-sidebar-nav-groups">
                 @foreach ($navigation as $group)
                     @php
@@ -111,6 +165,47 @@
             {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_NAV_END) }}
         </nav>
 
+        @if ((! $hasTopbar) && filament()->auth()->check())
+            @if (filament()->hasDatabaseNotifications())
+                @livewire(Filament\Livewire\DatabaseNotifications::class, [
+                    'lazy' => filament()->hasLazyLoadedDatabaseNotifications(),
+                ])
+            @endif
+
+            @if (filament()->hasUserMenu())
+                @php
+                    $user = filament()->auth()->user();
+                @endphp
+
+                <x-filament-panels::user-menu dropdown-placement="top-end">
+                    <x-slot name="trigger">
+                        <button
+                            aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}"
+                            type="button"
+                            class="fi-user-menu-trigger"
+                        >
+                            <x-filament-panels::avatar.user :user="$user" loading="lazy" />
+
+                            <span
+                                @if ($isSidebarCollapsibleOnDesktop)
+                                    x-show="$store.sidebar.isOpen"
+                                @endif
+                                class="fi-user-menu-trigger-text"
+                            >
+                                {{ filament()->getUserName($user) }}
+                            </span>
+
+                            {{
+                                \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::ChevronUp, alias: \Filament\View\PanelsIconAlias::USER_MENU_TOGGLE_BUTTON, attributes: new \Illuminate\View\ComponentAttributeBag([
+                                    'x-show' => $isSidebarCollapsibleOnDesktop ? '$store.sidebar.isOpen' : null,
+                                ]))
+                            }}
+                        </button>
+                    </x-slot>
+                </x-filament-panels::user-menu>
+            @endif
+        @endif
+
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_FOOTER) }}
     </aside>
     {{-- format-ignore-end --}}

packages/panels/src/Livewire/DatabaseNotifications.php

@@ -20,8 +20,10 @@ class DatabaseNotifications extends BaseComponent
         return Filament::getDatabaseNotificationsPollingInterval();
     }
 
-    public function getTrigger(): View
+    public function getTrigger(): ?View
     {
-        return view('filament-panels::components.topbar.database-notifications-trigger');
+        return filament()->hasTopbar()
+            ? view('filament-panels::components.topbar.database-notifications-trigger')
+            : view('filament-panels::components.sidebar.database-notifications-trigger');
     }
 }

packages/panels/src/Livewire/Sidebar.php

@@ -5,6 +5,7 @@ namespace Filament\Livewire;
 use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
 use Filament\Livewire\Concerns\HasTenantMenu;
+use Filament\Livewire\Concerns\HasUserMenu;
 use Filament\Schemas\Concerns\InteractsWithSchemas;
 use Filament\Schemas\Contracts\HasSchemas;
 use Illuminate\Contracts\View\View;
@@ -14,6 +15,7 @@ use Livewire\Component;
 class Sidebar extends Component implements HasActions, HasSchemas
 {
     use HasTenantMenu;
+    use HasUserMenu;
     use InteractsWithActions;
     use InteractsWithSchemas;
 

packages/panels/src/View/PanelsIconAlias.php

@@ -54,10 +54,14 @@ class PanelsIconAlias
 
     const TOPBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON = 'panels::topbar.open-database-notifications-button';
 
+    const SIDEBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON = 'panels::sidebar.open-database-notifications-button';
+
     const USER_MENU_PROFILE_ITEM = 'panels::user-menu.profile-item';
 
     const USER_MENU_LOGOUT_BUTTON = 'panels::user-menu.logout-button';
 
+    const USER_MENU_TOGGLE_BUTTON = 'panels::user-menu.toggle-button';
+
     const WIDGETS_ACCOUNT_LOGOUT_BUTTON = 'panels::widgets.account.logout-button';
 
     const WIDGETS_FILAMENT_INFO_OPEN_DOCUMENTATION_BUTTON = 'panels::widgets.filament-info.open-documentation-button';

packages/panels/src/View/PanelsRenderHook.php

@@ -124,6 +124,8 @@ class PanelsRenderHook
 
     const SIDEBAR_LOGO_BEFORE = 'panels::sidebar.logo.before';
 
+    const SIDEBAR_START = 'panels::sidebar.start';
+
     const SIDEBAR_NAV_END = 'panels::sidebar.nav.end';
 
     const SIDEBAR_NAV_START = 'panels::sidebar.nav.start';

packages/support/resources/views/components/modal/index.blade.php

@@ -29,6 +29,7 @@
     'slideOver' => false,
     'stickyFooter' => false,
     'stickyHeader' => false,
+    'teleport' => null,
     'trigger' => null,
     'visible' => true,
     'width' => 'sm',
@@ -77,6 +78,11 @@
     </div>
 @endif
 
+@if (filled($teleport))
+    {!! "<template x-teleport=\"{$teleport}\">" !!}
+    {{-- Avoid formatting issues with unclosed elements --}}
+@endif
+
 <div
     @if ($ariaLabelledby)
         aria-labelledby="{{ $ariaLabelledby }}"
@@ -261,6 +267,11 @@
     </div>
 </div>
 
+@if (filled($teleport))
+    {!! '</template>' !!}
+    {{-- Avoid formatting issues with unclosed elements --}}
+@endif
+
 @if ($trigger)
     {!! '</div>' !!}
     {{-- Avoid formatting issues with unclosed elements --}}