Revert #8116

filamentphp · Sep 9, 2023 · 2435785 · 2435785
1 parent eb6165e
commit 2435785
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 20 deletions.
diff --git a/dist/theme.css b/dist/theme.css
diff --git a/resources/views/components/layout/base.blade.php b/resources/views/components/layout/base.blade.php
@@ -90,7 +90,7 @@
     </head>
 
     <body
-        class="fi-body min-h-screen bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white"
+        class="fi-body min-h-screen overscroll-y-none bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white"
     >
         {{ \Filament\Support\Facades\FilamentView::renderHook('panels::body.start') }}
 

diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
@@ -19,20 +19,21 @@ class="fi-sidebar-close-overlay fixed inset-0 z-30 bg-gray-950/50 transition dur
             @if (filament()->isSidebarCollapsibleOnDesktop())
                 x-data="{}"
                 x-bind:class="{
-                    'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
+                    'lg:ps-[--collapsed-sidebar-width]': ! $store.sidebar.isOpen,
+                    'fi-main-ctn-sidebar-open lg:ps-[--sidebar-width]': $store.sidebar.isOpen,
                 }"
                 x-bind:style="'display: flex'" {{-- 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,
+                    'fi-main-ctn-sidebar-open lg:ps-[--sidebar-width]': $store.sidebar.isOpen,
                 }"
                 x-bind:style="'display: flex'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
             @endif
             @class([
                 'fi-main-ctn w-screen flex-1 flex-col',
                 'hidden h-full transition-all' => filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop(),
-                'flex' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
+                'flex lg:ps-[--sidebar-width]' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
             ])
         >
             <x-filament-panels::topbar :navigation="$navigation" />

diff --git a/resources/views/components/sidebar/index.blade.php b/resources/views/components/sidebar/index.blade.php
@@ -3,7 +3,7 @@
 ])
 
 @php
-    $openSidebarClasses = 'fi-sidebar-open w-[--sidebar-width] translate-x-0 shadow-xl ring-1 ring-gray-950/5 rtl:-translate-x-0 dark:ring-white/10';
+    $openSidebarClasses = 'fi-sidebar-open max-w-none translate-x-0 shadow-xl ring-1 ring-gray-950/5 rtl:-translate-x-0 dark:ring-white/10';
     $isRtl = __('filament-panels::layout.direction') === 'rtl';
 @endphp
 
@@ -13,27 +13,19 @@
         x-cloak
         x-bind:class="
             $store.sidebar.isOpen
-                ? @js($openSidebarClasses . 'lg:sticky')
-                : '-translate-x-full rtl:translate-x-full lg:sticky lg:translate-x-0 rtl:lg:-translate-x-0'
+                ? @js($openSidebarClasses)
+                : 'lg:max-w-[--collapsed-sidebar-width] -translate-x-full rtl:translate-x-full lg:translate-x-0 rtl:lg:-translate-x-0'
         "
     @else
-        @if (filament()->hasTopNavigation())
+        @if (filament()->hasTopNavigation() || filament()->isSidebarFullyCollapsibleOnDesktop())
             x-cloak
-            x-bind:class="$store.sidebar.isOpen ? @js($openSidebarClasses) : '-translate-x-full rtl:translate-x-full'"
-        @elseif (filament()->isSidebarFullyCollapsibleOnDesktop())
-            x-cloak
-            x-bind:class="$store.sidebar.isOpen ? @js($openSidebarClasses . 'lg:sticky') : '-translate-x-full rtl:translate-x-full'"
         @else
             x-cloak="-lg"
-            x-bind:class="
-                $store.sidebar.isOpen
-                    ? @js($openSidebarClasses . 'lg:sticky')
-                    : 'w-[--sidebar-width] -translate-x-full rtl:translate-x-full lg:sticky'
-            "
         @endif
+        x-bind:class="$store.sidebar.isOpen ? @js($openSidebarClasses) : '-translate-x-full rtl:translate-x-full'"
     @endif
     @class([
-        'fi-sidebar fixed inset-y-0 start-0 z-30 grid 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 z-30 grid h-screen w-[--sidebar-width] content-start bg-white transition-all dark:bg-gray-900 lg:z-0 lg:bg-transparent lg:shadow-none lg:ring-0 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(),
     ])
@@ -93,7 +85,6 @@ class="-mx-1.5 ms-auto hidden lg:flex"
 
     <nav
         class="fi-sidebar-nav flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden px-6 py-8"
-        style="scrollbar-gutter: stable"
     >
         {{ \Filament\Support\Facades\FilamentView::renderHook('panels::sidebar.nav.start') }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,7 +90,7 @@ @@
         </head>
         <body
-            class="fi-body min-h-screen bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white"
+            class="fi-body min-h-screen overscroll-y-none bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white"
         >
             {{ \Filament\Support\Facades\FilamentView::renderHook('panels::body.start') }}
@@ Expand Down @@