fix to work with new filament sticky top bar

resources/css/plugin.css

@@ -1,93 +1,31 @@
 @tailwind utilities;
+.filament-main-topbar::before {
+  @apply opacity-0;
+  content: "";
+  z-index: 5;
+}
+
+.is-sticky .filament-main-topbar::before {
+  @apply opacity-100 h-16 block absolute inset-0 backdrop-blur-md transition-all bg-white/75 border-b border-gray-200 dark:bg-gray-900/75 dark:border-gray-700;
+}
 
-.filament-app-layout {
-  overflow-x: clip !important;
+.is-sticky .filament-header {
+  @apply transition-all z-10 min-h-[4rem] py-0 flex items-center space-y-0 sticky top-0;
 }
 
-.filament-header {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0rem;
+.is-sticky .filament-header .filament-header-heading {
+  @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden;
 }
 
 [stuck] .filament-header {
   margin-inline: -1rem;
   padding-inline: theme("spacing.4");
   padding-block: theme("spacing.3");
-  z-index: 39;
+  z-index: 20;
   min-height: 4rem;
   align-items: center;
   background-color: theme(colors.white / 75%);
   border-color: theme("colors.gray.200");
   border-bottom: solid 1px;
   backdrop-filter: blur(12px);
-}
-
-[stuck] .filament-header h1 {
-  font-size: theme("fontSize.xl");
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.dark [stuck] .filament-header {
-  background-color: theme(colors.gray.900 / 75%);
-  border-color: theme("colors.gray.700");
-}
-
-@screen md {
-  [stuck] .filament-header {
-    margin-inline: -1.5rem;
-    padding-inline: theme("spacing.6");
-    background-color: transparent !important;
-    border-color: transparent !important;
-    backdrop-filter: none;
-  }
-
-  .dark [stuck] .filament-header {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    backdrop-filter: none;
-  }
-
-  .filament-main::before {
-    content: "";
-    opacity: 0;
-    height: 4rem;
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 5.4em;
-    right: 0;
-    z-index: -1;
-    background-color: transparent;
-    border-color: transparent;
-    border-bottom: solid 1px;
-    backdrop-filter: blur(12px);
-    transition: opacity 0.125s ease-out;
-  }
-
-  [stuck] .filament-main::before {
-    opacity: 1;
-    z-index: 5;
-    transition: opacity 0.125s ease-out;
-    background-color: theme(colors.white / 75%);
-    border-color: theme("colors.gray.200");
-  }
-
-  .dark [stuck] .filament-main::before {
-    background-color: theme(colors.gray.900 / 75%);
-    border-color: theme("colors.gray.700");
-  }
-}
-
-@screen lg {
-  .filament-main.filament-main-sidebar-open::before {
-    left: var(--sidebar-width);
-  }
-
-  [stuck] .filament-header {
-    margin-inline: -2rem;
-    padding-inline: theme("spacing.8");
-  }
-}
+}

resources/js/plugin.js

@@ -1,26 +1,26 @@
 const filamentTopbar = document.querySelector(".filament-main-topbar");
-const filamentHeader = document.querySelector(".filament-header");
-const filamentBody = document.querySelector(".filament-body");
+const filamentMain = document.querySelector(".filament-main");
 
-if (filamentTopbar && filamentHeader && filamentBody) {
+if (filamentTopbar && filamentMain) {
   window.addEventListener("load", function () {
+    const trigger = document.createElement("div");
+    trigger.classList.add("filament-sticky-trigger");
+    filamentTopbar.after(trigger);
+
     const observer = new IntersectionObserver(
       ([e]) => {
         if (e.isIntersecting) {
-          filamentHeader.removeAttribute("stuck");
-          filamentBody.removeAttribute("stuck");
-        } else {
-          filamentHeader.setAttribute("stuck", "true");
-          filamentBody.setAttribute("stuck", "true");
+          filamentMain.classList.remove("is-sticky");
+          return;
         }
+
+        filamentMain.classList.add("is-sticky");
       },
       {
-        root: null,
-        rootMargin: `${filamentTopbar.offsetHeight * -1}px`,
         threshold: [0],
       }
     );
 
-    observer.observe(filamentTopbar);
+    observer.observe(trigger);
   });
 }