Merge pull request #12 from awcodes/no-overlay-test

Fix: overlay issues with notifications

resources/css/plugin.css

@@ -1,31 +1,24 @@
 @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;
+@screen lg {
+  .filament-sidebar {
+    z-index: 2 !important;
+  }
 }
 
 .is-sticky .filament-header {
-  @apply transition-all z-10 min-h-[4rem] py-0 flex items-center space-y-0 sticky top-0;
+  @apply sticky inset-x-0 md:items-center py-3 md:-inset-x-6;
+  z-index: 1;
 }
 
-.is-sticky .filament-header .filament-header-heading {
-  @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden;
+.is-sticky .filament-header:before {
+  @apply backdrop-blur-md bg-white/95 dark:bg-gray-900/95 border-b border-gray-200 dark:border-gray-700 absolute block top-0 bottom-0;
+  content: "";
+  z-index: -1;
+  left: -1000px;
+  right: -1000px;
 }
 
-[stuck] .filament-header {
-  margin-inline: -1rem;
-  padding-inline: theme("spacing.4");
-  padding-block: theme("spacing.3");
-  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);
+.is-sticky .filament-header .filament-header-heading {
+  @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden leading-none;
 }

resources/js/plugin.js

@@ -1,22 +1,26 @@
 const filamentTopbar = document.querySelector(".filament-main-topbar");
-const filamentMain = document.querySelector(".filament-main");
+const filamentMainContent = document.querySelector(".filament-main-content");
+const filamentHeader = document.querySelector(".filament-header");
 
-if (filamentTopbar && filamentMain) {
+if (filamentTopbar && filamentMainContent && filamentHeader) {
   window.addEventListener("load", function () {
     const trigger = document.createElement("div");
     trigger.classList.add("filament-sticky-trigger");
-    filamentTopbar.after(trigger);
+    filamentMainContent.prepend(trigger);
 
     const observer = new IntersectionObserver(
       ([e]) => {
         if (e.isIntersecting) {
-          filamentMain.classList.remove("is-sticky");
+          filamentMainContent.classList.remove("is-sticky");
           return;
         }
 
-        filamentMain.classList.add("is-sticky");
+        filamentHeader.style.top = filamentTopbar.offsetHeight + "px";
+        filamentHeader.setAttribute("wire:ignore", true);
+        filamentMainContent.classList.add("is-sticky");
       },
       {
+        rootMargin: `-${filamentTopbar.offsetHeight}px`,
         threshold: [0],
       }
     );