- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_START, scopes: $livewire->getRenderHookScopes()) }}
+ @if (filament()->hasTopbar())
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_BEFORE, scopes: $livewire->getRenderHookScopes()) }}
+ @livewire(\Filament\Livewire\Topbar::class)
+
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $livewire->getRenderHookScopes()) }}
+
+ {{-- The sidebar is after the page content in the markup to fix issues with page content overlapping dropdown content from the sidebar. --}}
isSidebarCollapsibleOnDesktop())
- x-data="{}"
- x-bind:class="{
- 'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
- }"
- x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
- @elseif (filament()->isSidebarFullyCollapsibleOnDesktop())
- x-data="{}"
- x-bind:class="{
- 'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
- }"
- x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
- @elseif (! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation() || (! filament()->hasNavigation())))
- x-data="{}"
- x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
- @endif
- @class([
- 'fi-main-ctn w-screen flex-1 flex-col',
- 'h-full opacity-0 transition-all' => filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop(),
- 'opacity-0' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation() || (! filament()->hasNavigation())),
- 'flex' => filament()->hasTopNavigation() || (! filament()->hasNavigation()),
- ])
+ class="fi-layout flex min-h-screen w-full flex-row-reverse overflow-x-clip"
>
- @if (filament()->hasTopbar())
- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_BEFORE, scopes: $livewire->getRenderHookScopes()) }}
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_START, scopes: $livewire->getRenderHookScopes()) }}
- @livewire(\Filament\Livewire\Topbar::class)
-
- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $livewire->getRenderHookScopes()) }}
- @endif
-
-
isSidebarCollapsibleOnDesktop())
+ x-data="{}"
+ x-bind:class="{
+ 'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
+ }"
+ x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
+ @elseif (filament()->isSidebarFullyCollapsibleOnDesktop())
+ x-data="{}"
+ x-bind:class="{
+ 'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
+ }"
+ x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
+ @elseif (! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation() || (! filament()->hasNavigation())))
+ x-data="{}"
+ x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
+ @endif
@class([
- 'fi-main mx-auto h-full w-full px-4 md:px-6 lg:px-8',
- match ($maxContentWidth ??= (filament()->getMaxContentWidth() ?? MaxWidth::SevenExtraLarge)) {
- MaxWidth::ExtraSmall, 'xs' => 'max-w-xs',
- MaxWidth::Small, 'sm' => 'max-w-sm',
- MaxWidth::Medium, 'md' => 'max-w-md',
- MaxWidth::Large, 'lg' => 'max-w-lg',
- MaxWidth::ExtraLarge, 'xl' => 'max-w-xl',
- MaxWidth::TwoExtraLarge, '2xl' => 'max-w-2xl',
- MaxWidth::ThreeExtraLarge, '3xl' => 'max-w-3xl',
- MaxWidth::FourExtraLarge, '4xl' => 'max-w-4xl',
- MaxWidth::FiveExtraLarge, '5xl' => 'max-w-5xl',
- MaxWidth::SixExtraLarge, '6xl' => 'max-w-6xl',
- MaxWidth::SevenExtraLarge, '7xl' => 'max-w-7xl',
- MaxWidth::Full, 'full' => 'max-w-full',
- MaxWidth::MinContent, 'min' => 'max-w-min',
- MaxWidth::MaxContent, 'max' => 'max-w-max',
- MaxWidth::FitContent, 'fit' => 'max-w-fit',
- MaxWidth::Prose, 'prose' => 'max-w-prose',
- MaxWidth::ScreenSmall, 'screen-sm' => 'max-w-screen-sm',
- MaxWidth::ScreenMedium, 'screen-md' => 'max-w-screen-md',
- MaxWidth::ScreenLarge, 'screen-lg' => 'max-w-screen-lg',
- MaxWidth::ScreenExtraLarge, 'screen-xl' => 'max-w-screen-xl',
- MaxWidth::ScreenTwoExtraLarge, 'screen-2xl' => 'max-w-screen-2xl',
- default => $maxContentWidth,
- },
+ 'fi-main-ctn w-screen flex-1 flex-col',
+ 'h-full opacity-0 transition-all' => filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop(),
+ 'opacity-0' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation() || (! filament()->hasNavigation())),
+ 'flex' => filament()->hasTopNavigation() || (! filament()->hasNavigation()),
])
>
- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_START, scopes: $livewire->getRenderHookScopes()) }}
+ getMaxContentWidth() ?? MaxWidth::SevenExtraLarge)) {
+ MaxWidth::ExtraSmall, 'xs' => 'max-w-xs',
+ MaxWidth::Small, 'sm' => 'max-w-sm',
+ MaxWidth::Medium, 'md' => 'max-w-md',
+ MaxWidth::Large, 'lg' => 'max-w-lg',
+ MaxWidth::ExtraLarge, 'xl' => 'max-w-xl',
+ MaxWidth::TwoExtraLarge, '2xl' => 'max-w-2xl',
+ MaxWidth::ThreeExtraLarge, '3xl' => 'max-w-3xl',
+ MaxWidth::FourExtraLarge, '4xl' => 'max-w-4xl',
+ MaxWidth::FiveExtraLarge, '5xl' => 'max-w-5xl',
+ MaxWidth::SixExtraLarge, '6xl' => 'max-w-6xl',
+ MaxWidth::SevenExtraLarge, '7xl' => 'max-w-7xl',
+ MaxWidth::Full, 'full' => 'max-w-full',
+ MaxWidth::MinContent, 'min' => 'max-w-min',
+ MaxWidth::MaxContent, 'max' => 'max-w-max',
+ MaxWidth::FitContent, 'fit' => 'max-w-fit',
+ MaxWidth::Prose, 'prose' => 'max-w-prose',
+ MaxWidth::ScreenSmall, 'screen-sm' => 'max-w-screen-sm',
+ MaxWidth::ScreenMedium, 'screen-md' => 'max-w-screen-md',
+ MaxWidth::ScreenLarge, 'screen-lg' => 'max-w-screen-lg',
+ MaxWidth::ScreenExtraLarge, 'screen-xl' => 'max-w-screen-xl',
+ MaxWidth::ScreenTwoExtraLarge, 'screen-2xl' => 'max-w-screen-2xl',
+ default => $maxContentWidth,
+ },
+ ])
+ >
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_START, scopes: $livewire->getRenderHookScopes()) }}
- {{ $slot }}
+ {{ $slot }}
- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_END, scopes: $livewire->getRenderHookScopes()) }}
-
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_END, scopes: $livewire->getRenderHookScopes()) }}
+
- {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $livewire->getRenderHookScopes()) }}
-
+ {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $livewire->getRenderHookScopes()) }}
+