mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
Move logo to topbar to allow for full width status bars in layout
This commit is contained in:
Dan Harrin
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,140 +1,138 @@
|
||||
@php
|
||||
use Filament\Support\Enums\MaxWidth;
|
||||
|
||||
$navigation = filament()->getNavigation();
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::layout.base :livewire="$livewire">
|
||||
{{-- 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 flex min-h-screen w-full flex-row-reverse overflow-x-clip"
|
||||
>
|
||||
{{ \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. --}}
|
||||
<div
|
||||
@if (filament()->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
|
||||
|
||||
<main
|
||||
<div
|
||||
@if (filament()->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()) }}
|
||||
<main
|
||||
@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,
|
||||
},
|
||||
])
|
||||
>
|
||||
{{ \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()) }}
|
||||
</main>
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_END, scopes: $livewire->getRenderHookScopes()) }}
|
||||
</main>
|
||||
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $livewire->getRenderHookScopes()) }}
|
||||
</div>
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $livewire->getRenderHookScopes()) }}
|
||||
</div>
|
||||
|
||||
@if (filament()->hasNavigation())
|
||||
<div
|
||||
x-cloak
|
||||
x-data="{}"
|
||||
x-on:click="$store.sidebar.close()"
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition.opacity.300ms
|
||||
class="fi-sidebar-close-overlay fixed inset-0 z-30 bg-gray-950/50 transition duration-500 dark:bg-gray-950/75 lg:hidden"
|
||||
></div>
|
||||
@if (filament()->hasNavigation())
|
||||
<div
|
||||
x-cloak
|
||||
x-data="{}"
|
||||
x-on:click="$store.sidebar.close()"
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition.opacity.300ms
|
||||
class="fi-sidebar-close-overlay fixed inset-0 z-30 bg-gray-950/50 transition duration-500 dark:bg-gray-950/75 lg:hidden"
|
||||
></div>
|
||||
|
||||
@livewire(\Filament\Livewire\Sidebar::class)
|
||||
@livewire(\Filament\Livewire\Sidebar::class)
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(() => {
|
||||
let activeSidebarItem = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-item.fi-active',
|
||||
)
|
||||
|
||||
if (
|
||||
!activeSidebarItem ||
|
||||
activeSidebarItem.offsetParent === null
|
||||
) {
|
||||
activeSidebarItem = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-group.fi-active',
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(() => {
|
||||
let activeSidebarItem = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-item.fi-active',
|
||||
)
|
||||
}
|
||||
|
||||
if (
|
||||
!activeSidebarItem ||
|
||||
activeSidebarItem.offsetParent === null
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (
|
||||
!activeSidebarItem ||
|
||||
activeSidebarItem.offsetParent === null
|
||||
) {
|
||||
activeSidebarItem = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-group.fi-active',
|
||||
)
|
||||
}
|
||||
|
||||
const sidebarWrapper = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-nav',
|
||||
)
|
||||
if (
|
||||
!activeSidebarItem ||
|
||||
activeSidebarItem.offsetParent === null
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!sidebarWrapper) {
|
||||
return
|
||||
}
|
||||
const sidebarWrapper = document.querySelector(
|
||||
'.fi-main-sidebar .fi-sidebar-nav',
|
||||
)
|
||||
|
||||
sidebarWrapper.scrollTo(
|
||||
0,
|
||||
activeSidebarItem.offsetTop -
|
||||
window.innerHeight / 2,
|
||||
)
|
||||
}, 10)
|
||||
})
|
||||
</script>
|
||||
@endif
|
||||
if (!sidebarWrapper) {
|
||||
return
|
||||
}
|
||||
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_END, scopes: $livewire->getRenderHookScopes()) }}
|
||||
</div>
|
||||
sidebarWrapper.scrollTo(
|
||||
0,
|
||||
activeSidebarItem.offsetTop -
|
||||
window.innerHeight / 2,
|
||||
)
|
||||
}, 10)
|
||||
})
|
||||
</script>
|
||||
@endif
|
||||
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_END, scopes: $livewire->getRenderHookScopes()) }}
|
||||
</div>
|
||||
@endif
|
||||
</x-filament-panels::layout.base>
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
@props([
|
||||
'navigation',
|
||||
])
|
||||
|
||||
@php
|
||||
$openSidebarClasses = 'fi-sidebar-open w-[--sidebar-width] translate-x-0 shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10 rtl:-translate-x-0';
|
||||
$isRtl = __('filament-panels::layout.direction') === 'rtl';
|
||||
$navigation = filament()->getNavigation();
|
||||
@endphp
|
||||
|
||||
{{-- format-ignore-start --}}
|
||||
<aside
|
||||
x-data="{}"
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop() && (! filament()->hasTopNavigation()))
|
||||
x-cloak
|
||||
x-bind:class="
|
||||
@@ -31,61 +35,22 @@
|
||||
@endif
|
||||
{{
|
||||
$attributes->class([
|
||||
'fi-sidebar fixed inset-y-0 start-0 z-30 flex flex-col h-screen content-start bg-white transition-all dark:bg-gray-900 lg:z-0 lg:bg-transparent lg:shadow-none lg:ring-0 lg:transition-none dark:lg:bg-transparent',
|
||||
'fi-sidebar fixed inset-y-0 start-0 lg:h-[calc(100dvh-4rem)] lg:top-[4rem] z-30 flex flex-col h-screen content-start bg-white transition-all dark:bg-gray-900 lg:z-0 lg:bg-transparent lg:shadow-none lg:ring-0 lg:transition-none dark:lg:bg-transparent',
|
||||
'lg:translate-x-0 rtl:lg:-translate-x-0' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
|
||||
'lg:-translate-x-full rtl:lg:translate-x-full' => filament()->hasTopNavigation(),
|
||||
])
|
||||
}}
|
||||
>
|
||||
<div class="overflow-x-clip">
|
||||
<div class="overflow-x-clip lg:hidden">
|
||||
<header
|
||||
class="fi-sidebar-header flex h-16 items-center bg-white px-6 ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 lg:shadow-sm"
|
||||
>
|
||||
<div
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop())
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition:enter="lg:transition lg:delay-100"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
@endif
|
||||
>
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a {{ \Filament\Support\generate_href_html($homeUrl) }}>
|
||||
<x-filament-panels::logo />
|
||||
</a>
|
||||
@else
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a {{ \Filament\Support\generate_href_html($homeUrl) }}>
|
||||
<x-filament-panels::logo />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop())
|
||||
<x-filament::icon-button
|
||||
color="gray"
|
||||
:icon="$isRtl ? 'heroicon-o-chevron-left' : 'heroicon-o-chevron-right'"
|
||||
{{-- @deprecated Use `panels::sidebar.expand-button.rtl` instead of `panels::sidebar.expand-button` for RTL. --}}
|
||||
:icon-alias="$isRtl ? ['panels::sidebar.expand-button.rtl', 'panels::sidebar.expand-button'] : 'panels::sidebar.expand-button'"
|
||||
icon-size="lg"
|
||||
:label="__('filament-panels::layout.actions.sidebar.expand.label')"
|
||||
x-cloak
|
||||
x-on:click="$store.sidebar.open()"
|
||||
x-show="! $store.sidebar.isOpen"
|
||||
class="mx-auto"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop())
|
||||
<x-filament::icon-button
|
||||
color="gray"
|
||||
:icon="$isRtl ? 'heroicon-o-chevron-right' : 'heroicon-o-chevron-left'"
|
||||
{{-- @deprecated Use `panels::sidebar.collapse-button.rtl` instead of `panels::sidebar.collapse-button` for RTL. --}}
|
||||
:icon-alias="$isRtl ? ['panels::sidebar.collapse-button.rtl', 'panels::sidebar.collapse-button'] : 'panels::sidebar.collapse-button'"
|
||||
icon-size="lg"
|
||||
:label="__('filament-panels::layout.actions.sidebar.collapse.label')"
|
||||
x-cloak
|
||||
x-on:click="$store.sidebar.close()"
|
||||
x-show="$store.sidebar.isOpen"
|
||||
class="ms-auto hidden lg:flex"
|
||||
/>
|
||||
</a>
|
||||
@else
|
||||
<x-filament-panels::logo />
|
||||
@endif
|
||||
</header>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
@props([
|
||||
'navigation',
|
||||
])
|
||||
|
||||
@php
|
||||
$isRtl = __('filament-panels::layout.direction') === 'rtl';
|
||||
@endphp
|
||||
|
||||
<div
|
||||
{{
|
||||
$attributes->class([
|
||||
@@ -7,7 +15,7 @@
|
||||
}}
|
||||
>
|
||||
<nav
|
||||
class="flex h-16 items-center gap-x-4 bg-white px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8"
|
||||
class="flex h-16 items-center bg-white px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10"
|
||||
>
|
||||
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_START) }}
|
||||
|
||||
@@ -19,10 +27,11 @@
|
||||
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-topbar-open-sidebar-btn',
|
||||
'fi-topbar-open-sidebar-btn !mx-0',
|
||||
'lg:hidden' => (! filament()->isSidebarFullyCollapsibleOnDesktop()) || filament()->isSidebarCollapsibleOnDesktop(),
|
||||
])
|
||||
/>
|
||||
@@ -34,30 +43,63 @@
|
||||
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-topbar-close-sidebar-btn lg:hidden"
|
||||
class="fi-topbar-close-sidebar-btn !mx-0 lg:hidden"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if (filament()->hasTopNavigation() || (! filament()->hasNavigation()))
|
||||
<div class="me-6 hidden lg:flex">
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a {{ \Filament\Support\generate_href_html($homeUrl) }}>
|
||||
<x-filament-panels::logo />
|
||||
</a>
|
||||
@else
|
||||
<x-filament-panels::logo />
|
||||
@endif
|
||||
</div>
|
||||
<div class="me-6 hidden items-center lg:flex">
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop())
|
||||
<x-filament::icon-button
|
||||
color="gray"
|
||||
:icon="$isRtl ? 'heroicon-o-chevron-left' : 'heroicon-o-chevron-right'"
|
||||
{{-- @deprecated Use `panels::sidebar.expand-button.rtl` instead of `panels::sidebar.expand-button` for RTL. --}}
|
||||
:icon-alias="$isRtl ? ['panels::sidebar.expand-button.rtl', 'panels::sidebar.expand-button'] : 'panels::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="!mx-0"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop())
|
||||
<x-filament::icon-button
|
||||
color="gray"
|
||||
:icon="$isRtl ? 'heroicon-o-chevron-right' : 'heroicon-o-chevron-left'"
|
||||
{{-- @deprecated Use `panels::sidebar.collapse-button.rtl` instead of `panels::sidebar.collapse-button` for RTL. --}}
|
||||
:icon-alias="$isRtl ? ['panels::sidebar.collapse-button.rtl', 'panels::sidebar.collapse-button'] : 'panels::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="!mx-0 hidden lg:flex"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a {{ \Filament\Support\generate_href_html($homeUrl) }}>
|
||||
<x-filament-panels::logo class="ms-3" />
|
||||
</a>
|
||||
@else
|
||||
<x-filament-panels::logo class="ms-3" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if (filament()->hasTopNavigation() || (! filament()->hasNavigation()))
|
||||
@if (filament()->hasTenancy() && filament()->hasTenantMenu())
|
||||
<x-filament-panels::tenant-menu class="hidden lg:block" />
|
||||
@endif
|
||||
|
||||
@if (filament()->hasNavigation())
|
||||
<ul class="me-4 hidden items-center gap-x-4 lg:flex">
|
||||
@foreach (filament()->getNavigation() as $group)
|
||||
<ul class="me-4 ms-4 hidden items-center gap-x-4 lg:flex">
|
||||
@foreach ($navigation as $group)
|
||||
@if ($groupLabel = $group->getLabel())
|
||||
<x-filament::dropdown
|
||||
placement="bottom-start"
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<div>
|
||||
<x-filament-panels::sidebar class="fi-main-sidebar" />
|
||||
@php
|
||||
$navigation = filament()->getNavigation();
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::sidebar
|
||||
:navigation="$navigation"
|
||||
class="fi-main-sidebar"
|
||||
/>
|
||||
|
||||
<x-filament-actions::modals />
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<div class="fi-topbar-ctn sticky top-0 z-20 overflow-x-clip">
|
||||
<x-filament-panels::topbar />
|
||||
@php
|
||||
$navigation = filament()->getNavigation();
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::topbar :navigation="$navigation" />
|
||||
|
||||
<x-filament-actions::modals />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user