Skip to content

Commit c0a9187

Browse files
cklei-carlycklei-carly
committed
Merge branch 'develop'
* develop: update layout for content page on cms
2 parents 829e31d + 31583d7 commit c0a9187

5 files changed

Lines changed: 76 additions & 32 deletions

File tree

‎resources/dist/inspirecms.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/inspirecms.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,13 @@ document.addEventListener('peek:modal-opened', () => {
2020
});
2121
}
2222
});
23+
24+
document.addEventListener('alpine:init', () => {
25+
window.Alpine.store('contentSidebar', {
26+
isOpen: Alpine.$persist(false).as('contentSidebar_on'),
27+
reset: function () {
28+
console.log('resetting sidebar state');
29+
this.isOpen = false;
30+
},
31+
});
32+
});

‎resources/views/components/layout/content-page.blade.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class="fi-layout flex min-h-screen w-full flex-row-reverse overflow-x-clip"
4141
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $livewire->getRenderHookScopes()) }}
4242
@endif
4343

44-
<div class="relative flex">
44+
<div>
4545

4646
@livewire('inspirecms::content-sidebar', [
4747
'redirectUrlParameters' => $redirectUrlParameters ?? [],
@@ -54,6 +54,7 @@ class="fi-layout flex min-h-screen w-full flex-row-reverse overflow-x-clip"
5454
<main
5555
@class([
5656
'fi-main mx-auto h-full w-full px-4 md:px-6 lg:px-8',
57+
'lg:pl-72',
5758
match ($maxContentWidth ??= (filament()->getMaxContentWidth() ?? MaxWidth::SevenExtraLarge)) {
5859
MaxWidth::ExtraSmall, 'xs' => 'max-w-xs',
5960
MaxWidth::Small, 'sm' => 'max-w-sm',

‎resources/views/livewire/content-sidebar.blade.php‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,59 @@
66
$sidebarExpanded = true;
77
@endphp
88

9-
<div class="model-explorer relative block flex-none bg-white dark:bg-gray-900 shadow-lg px-2"
10-
x-data="{
11-
sidebarExpanded: @js($sidebarExpanded),
9+
<div x-data="{
10+
sidebarExpanded: $store.contentSidebar.isOpen,
1211
}"
12+
>
13+
<div x-show="sidebarExpanded" x-cloak
14+
x-transition:enter="transition-opacity ease-int duration-300"
15+
x-transition:enter-start="opacity-0"
16+
x-transition:enter-end="opacity-100"
17+
x-transition:leave="transition-opacity ease-out duration-300"
18+
x-transition:leave-start="opacity-100"
19+
x-transition:leave-end="opacity-0"
20+
class="relative z-30 lg:hidden"
21+
role="dialog"
22+
aria-modal="true"
1323
>
14-
<div class="top-0 z-20 -ml-0.5 h-screen overflow-y-auto overflow-x-hidden pb-16">
15-
<div x-bind:class="{
16-
'!w-12': !sidebarExpanded,
17-
}" @class([
18-
'pt-2 pb-1',
19-
'w-64' => $sidebarExpanded,
20-
])>
21-
<div class="flex items-center justify-start">
22-
<button @class([
23-
'fi-icon-btn relative flex items-center justify-center rounded-lg outline-none transition duration-75 focus-visible:ring-2',
24-
'h-10 w-10',
25-
'text-gray-400 hover:text-gray-500 focus-visible:ring-primary-600 dark:text-gray-300 dark:hover:text-gray-100 dark:focus-visible:ring-primary-500',
26-
])
27-
x-on:click="sidebarExpanded = !sidebarExpanded"
28-
title="Expand sidebar"
29-
>
30-
<span class="sr-only">Expand sidebar</span>
31-
<svg class="w-5 h-5" x-show="sidebarExpanded" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M21.97 15V9C21.97 4 19.97 2 14.97 2H8.96997C3.96997 2 1.96997 4 1.96997 9V15C1.96997 20 3.96997 22 8.96997 22H14.97C19.97 22 21.97 20 21.97 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7.96997 2V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14.97 9.43994L12.41 11.9999L14.97 14.5599" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
32-
<svg class="w-5 h-5" x-show="!sidebarExpanded" style="display: none;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M21.97 15V9C21.97 4 19.97 2 14.97 2H8.96997C3.96997 2 1.96997 4 1.96997 9V15C1.96997 20 3.96997 22 8.96997 22H14.97C19.97 22 21.97 20 21.97 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14.97 2V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7.96997 9.43994L10.53 11.9999L7.96997 14.5599" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
33-
</button>
34-
24+
<div class="fixed inset-0 bg-gray-900/80" aria-hidden="true" :class="{'translate-x-0': sidebarExpanded, '-translate-x-full': !sidebarExpanded}"></div>
25+
<div class="fixed inset-0 flex">
26+
<div class="relative mr-16 flex w-full max-w-xs flex-1 top-0">
27+
<div class="absolute left-full flex w-16 justify-center pt-5">
28+
<button type="button" class="-m-2.5 p-2.5" @click="sidebarExpanded = false">
29+
<span class="sr-only">Close sidebar</span>
30+
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
31+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
32+
</svg>
33+
</button>
34+
</div>
35+
<!-- Sidebar component, swap this element with another sidebar if you like -->
36+
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white py-2 dark:bg-gray-900" @click.outside="sidebarExpanded = false">
37+
<div class="px-1 pb-2">
38+
{{ $this->localeSwitcher }}
39+
</div>
40+
41+
<x-inspirecms-support::model-explorer
42+
:livewire-key="$this->getId()"
43+
:livewire-name="$this->getName()"
44+
:items="$items"
45+
:model-explorer="$modelExplorer"
46+
:translatable="$translatable"
47+
:translatable-locale="$translatableLocale"
48+
:spa-mode="$isSpaMode ?? false"
49+
/>
50+
</div>
3551
</div>
3652
</div>
37-
38-
<div class="navigation-custom-scrollbar" x-show="sidebarExpanded" @style([
39-
'display: block' => $sidebarExpanded,
40-
])>
53+
</div>
54+
<div class="hidden lg:fixed lg:top-16 lg:bottom-0 lg:z-30 lg:flex lg:w-72 lg:flex-col">
55+
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white py-2 dark:bg-gray-900 dark:border-gray-700">
4156
<div class="px-1 pb-2">
4257
{{ $this->localeSwitcher }}
4358
</div>
4459

4560
<x-inspirecms-support::model-explorer
46-
class="text-base lg:text-sm w-64 lg:block"
61+
class="px-1"
4762
:livewire-key="$this->getId()"
4863
:livewire-name="$this->getName()"
4964
:items="$items"
@@ -55,6 +70,24 @@ class="text-base lg:text-sm w-64 lg:block"
5570
</div>
5671
</div>
5772

73+
<!-- Static sidebar for desktop -->
74+
<div x-show="!sidebarExpanded" x-cloak
75+
x-transition:enter="transition-opacity ease-linear duration-300"
76+
x-transition:enter-start="opacity-0"
77+
x-transition:enter-end="opacity-100"
78+
x-transition:leave="transition-opacity ease-linear duration-300"
79+
x-transition:leave-start="opacity-100"
80+
x-transition:leave-end="opacity-0"
81+
class="fixed top-16 right-0 z-10 px-2 py-2 lg:hidden">
82+
<button type="button"
83+
class="p-4 rounded-full shadow-md bg-white ring-1 ring-gray-300 hover:bg-gray-100 dark:bg-gray-600 dark:ring-gray-400/20 dark:hover:text-gray-400 dark:ring-gray-400/20"
84+
@click="sidebarExpanded = !sidebarExpanded"
85+
>
86+
<span class="sr-only">Open sidebar</span>
87+
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M21.97 15V9C21.97 4 19.97 2 14.97 2H8.96997C3.96997 2 1.96997 4 1.96997 9V15C1.96997 20 3.96997 22 8.96997 22H14.97C19.97 22 21.97 20 21.97 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14.97 2V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M7.96997 9.43994L10.53 11.9999L7.96997 14.5599" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
88+
</button>
89+
</div>
90+
5891
<x-filament-actions::modals />
5992
<x-inspirecms-support::tree-node.actions.modals />
6093
</div>

0 commit comments

Comments
 (0)