Merge pull request #6 from awcodes/chore/better-transition

Chore: better transitioning
awcodes · Jul 26, 2022 · eb79ccb · eb79ccb
2 parents 9235d4d + 4499386
commit eb79ccb
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 54 deletions.
diff --git a/resources/css/plugin.css b/resources/css/plugin.css
@@ -4,6 +4,10 @@
   overflow-x: clip !important;
 }
 
+.filament-sidebar {
+  z-index: 39 !important;
+}
+
 .filament-header {
   position: -webkit-sticky;
   position: sticky;
@@ -14,27 +18,13 @@
   margin-inline: -1rem;
   padding-inline: theme("spacing.4");
   padding-block: theme("spacing.3");
-  background-color: theme(colors.white / 75%);
-  z-index: 40;
-  backdrop-filter: blur(12px);
+  z-index: 39;
   min-height: 4rem;
-  border-bottom: solid 1px;
-  border-color: theme("colors.gray.200");
-  transition: all 0.25s ease-out;
   align-items: center;
-}
-
-@screen md {
-  [stuck] .filament-header {
-    margin-inline: -2rem;
-    padding-inline: theme("spacing.6");
-  }
-}
-
-@screen lg {
-  [stuck] .filament-header {
-    padding-inline: theme("spacing.8");
-  }
+  background-color: theme(colors.white / 75%);
+  border-color: theme("colors.gray.200");
+  border-bottom: solid 1px;
+  backdrop-filter: blur(12px);
 }
 
 [stuck] .filament-header h1 {
@@ -44,30 +34,60 @@
   white-space: nowrap;
 }
 
-@screen xl {
-  .filament-body[stuck]::before {
-    height: 4rem;
-    background-color: theme(colors.white / 75%);
-    border-bottom: solid 1px;
-    border-color: theme("colors.gray.200");
-    backdrop-filter: blur(12px);
+.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;
-    z-index: 0;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    transition: all 0.25s ease-out;
+    z-index: -1;
+    background-color: transparent;
+    border-color: transparent;
+    border-bottom: solid 1px;
+    backdrop-filter: blur(12px);
+    transition: opacity 0.125s ease-out;
   }
 
-  .dark .filament-body[stuck]::before {
+  [stuck] .filament-main::before {
+    opacity: 1;
+    z-index: 38;
+    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");
   }
 }
 
-.dark [stuck] .filament-header {
-  background-color: theme(colors.gray.900 / 75%);
-  border-color: theme("colors.gray.700");
+@screen lg {
+  [stuck] .filament-header {
+    margin-inline: -2rem;
+    padding-inline: theme("spacing.8");
+  }
 }
diff --git a/resources/dist/filament-sticky-header.css b/resources/dist/filament-sticky-header.css
diff --git a/resources/dist/filament-sticky-header.js b/resources/dist/filament-sticky-header.js
diff --git a/resources/js/plugin.js b/resources/js/plugin.js
@@ -1,24 +1,24 @@
 const el = document.querySelector(".filament-main-topbar");
 
 if (el) {
-    window.addEventListener('load', function() {
-        const observer = new IntersectionObserver(
-            ([e]) => {
-                if (e.isIntersecting) {
-                    document.querySelector(".filament-header").removeAttribute("stuck");
-                    document.querySelector(".filament-body").removeAttribute("stuck");
-                } else {
-                    document
-                        .querySelector(".filament-header")
-                        .setAttribute("stuck", "true");
-                    document
-                        .querySelector(".filament-body")
-                        .setAttribute("stuck", "true");
-                }
-            },
-            { threshold: [0] }
-        );
+  window.addEventListener("load", function () {
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          document.querySelector(".filament-header").removeAttribute("stuck");
+          document.querySelector(".filament-body").removeAttribute("stuck");
+        } else {
+          document.querySelector(".filament-header").setAttribute("stuck", "true");
+          document.querySelector(".filament-body").setAttribute("stuck", "true");
+        }
+      },
+      {
+        root: null,
+        rootMargin: `${el.offsetHeight * -1}px`,
+        threshold: [0],
+      }
+    );
 
-        observer.observe(el);
-    });
-}
+    observer.observe(el);
+  });
+}